[49-3] input要素で ラジオボタン や チェックボックスを作ろう (radio, checkbox)

最終更新日:-0001年11月30日  (初回投稿日:2013年03月26日)

<input type="radio">で「 」を、
<input type="checkbox">で「 」を作りましょう。
この2つは、ずっと前からあるフォームの定番部品です。

  type属性の値 部品の役割
<input>要素で作る
選択ボタン関連の部品
type="radio" 1つだけ選択できるボタン
type="checkbox" 複数選択できるボタン

ほかの属性で機能を追加できます

この部品も「type属性」以外の属性も使って、さらに機能を追加することができます。
(各属性については、それぞれのリンクで詳細をご覧ください。)

  • checked属性であらかじめチェックしておく(radio と checkbox だけに使える属性)
  • required属性で「必須項目」にする(未記入だと送信不可のバリデート)
  • autofocus属性で、HTML文書のロード後すぐに「フォーカス(記入のための選択)」する
  • form属性で <form>要素の外に出してレイアウトする
  • disabled属性で「使用不可」にする

checked属性は、radio と checkbox 専用の属性で以前からあり、たいがいのブラウザで使えます。
HTML5からの新しい属性( required, autofocus, form, disabled )は、今のところ Chrome OperaFirefox が対応しているようです。

<input type="radio"> で1つだけ選択できるボタンを作ろう

ラジオボタンは 1つだけ選択 できるボタンです。
1つ選択した後に他のボタンを選択すれば、前に選んだボタンの選択が外れます。

●<label>要素で選択しやすくしよう
ラジオボタンには、選択肢のテキストがつくのが普通ですが、
ラジオボタンとテキストを<label>要素で関連づけると、テキストのクリックでも選択できるようになるんです。これ便利。
(<label>要素については「[54] ラベルを付けて使いやすくしよう <label>」をご覧ください)

<label>なし: クリックで選択
<label>あり:

あったほうが選択しやすいよね。HTMソースは、下のサンプルソースで。

●サンプルソース
必ず name属性同じ名前を指定してグループ化します。このname属性の名前と value属性の値がセットで送信されます。(下のプレビューなら「repeat=はじめて」みたいなかんじで)
また、このサンプルは <label>要素でテキストのクリックで選択できるようにしています。

<label><input type="radio" name="repeat" value="はじめて" checked>はじめて</label>
<label><input type="radio" name="repeat" value="2回目">2回目</label>
<label><input type="radio" name="repeat" value="3回目以上">3回目以上</label>

checked属性を指定しておいた最初のボタンが、選択された状態で表示されます。
(クリックでサンプルHTMLが開きます)

<input type="checkbox"> で複数選択できるボタンを作ろう

チェックボックスは、いくつでも選択できるボタンです。

●<label>要素で選択しやすくしよう
ラジオボタン同様、チェックボックスとテキストを<label>要素で関連づけると、
テキストのクリックで選択できます。
(<label>要素については「[54] ラベルを付けて使いやすくしよう <label>」をご覧ください)

<label>なし: 選択A 選択B 選択C
<label>あり:

●サンプルソース
必ず name属性同じ名前にしてグループ化します。このname属性の名前と、チェックされた value値がセットで送信されます。
ラジオボタンのサンプルと同様に<label>要素でテキストと関連づけています。

<label><input type="checkbox" name="shop" value="当店" checked>当店</label>
<label><input type="checkbox" name="shop" value="A市場">A市場</label>
<label><input type="checkbox" name="shop" value="Bショップ">Bショップ</label>
<label><input type="checkbox" name="shop" value="その他">その他</label>

checked属性を指定しておいた最初のボタンが、選択された状態で表示されます。
(クリックでサンプルHTMLが開きます)

「indeterminateプロパティ」で、チェックボックスの「あいまい表示」

チェックボクスは今まで「ONかOFFか」しか無かったんですが、
Javascript の 「indeterminateプロパティ」で「どっちでもない状態」の表示ができるようになったんですと。
「indeterminate」は「あいまいな、不確定な」という意味の形容詞。インデターミネート。

こんなかんじね。
(クリックでサンプルHTMLが開きます)

サンプルソースはこちら。
あいまい表示にしたいチェックボックスに「id名」をつけておき、
JavaScriptで「indeterminate」を true にしています。

<label><input type="checkbox" name="shop" value="当店" id="koko">当店</label>
<script>
    var koko = document.getElementById("koko");
    koko.indeterminate = true;
</script>

HTML5のフォームサンプル

HTML5での新要素を使ったサンプルを作りました。
クリックするとサンプルHTMLで見られます。
Sample46_HTML5のフォーム (サンプル)

HTML5からの新要素は、今は Operaほぼ対応しているようです。Chromeもまあまあ検討。
また、IE10 onWin8 も対応しているそうです。
Firefoxは、部分的に対応。
Safari は、これからってかんじ。
(2013年3月記)

次回予告

次回は同じ<input type=""> で、「時間」を選択するフォーム部品を作りましょう。

type属性の新しい値、datetime, date, month, week, time は、「年月日や時間」をチョイスしてもらうフォーム部品です。
対応ブラウザなら、デフォルトでカレンダーが表示されて、けっこう画期的なんですが、まだ対応のブラウザが少ないのが難点です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.