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

<input type="radio">で「ラジオボタン 」を、
<input type="checkbox">で「チェックボックス 」を作りましょう。
この２つは、ずっと前からあるフォームの定番部品です。

下の表はインデックスになっています。各値をクリックすると、該当の項目にジャンプします。

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

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

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

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

<input type="radio"> は1つだけ選択できるボタン

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

選択1 選択2 選択3

<label>要素で選択しやすくしよう

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

label なし： クリックで選択
label あり： クリックで選択

あったほうが選択しやすいですよね。無いと、ボタンそのものに命中させないと選択できないし。
HTMソースこちら。

label なし：<input type="radio" name="ex"> クリックで選択<br>
label あり：<label><input type="radio" name="ex"> クリックで選択</label>

name属性と value属性の値がセットで送信されます

実際に使用するときは、 name属性で同じ名前を指定してグループ化し、それぞれに value属性で選択肢の値を指定しておきます。
このname属性の名前と value属性の値がセットで送信されます。
（下のサンプルなら、例えば「repeat=はじめて」といったデータが送信されます）

下のサンプルは、checked属性を最初のボタンに指定しているので、そのボタンが選択された状態で表示されます。

当店のご利用: はじめて 2回目 3回以上

<form class="sample">
  <span>当店のご利用:</span>
  <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>
  <input type="submit" value="送信">
</form>

<input type="checkbox"> は複数選択ボタン

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

選択A 選択B 選択C

ラジオボタン同様、チェックボックスとテキストを<label>要素で関連づけると、テキストのクリックで選択できます。

label なし： 選択A　 選択B　 選択C　
label あり： 選択A 選択B 選択C

label なし：
<input type="checkbox" name="ex"> 選択A　
<input type="checkbox" name="ex"> 選択B　
<input type="checkbox" name="ex"> 選択C　<br>
label あり：
<label><input type="checkbox" name="ex1"> 選択A</label>
<label><input type="checkbox" name="ex1"> 選択B</label>
<label><input type="checkbox" name="ex1"> 選択C</label>

同じく name属性と value属性の値がセットで送信されます

実際に使用するときは、 name属性で同じ名前を指定してグループ化し、それぞれに value属性で選択肢の値を指定しておきます。
このname属性の名前と value属性の値がセットで送信されます。
（下のサンプルなら、例えば「shop=アマゾン&shop=その他」といったデータが送信されます）

ラジオボタンと同様に checked属性を指定すれば、そのボタンが選択された状態で表示されます。

普段のご利用は：
当店 楽天市場 アマゾン Yahooショップ その他

<form class="sample">
  普段のご利用は：<br>
  <label><input type="checkbox" name="shop" value="当店" checked> 当店</label>
  <label><input type="checkbox" name="shop" value="楽天市場"> 楽天市場</label>
  <label><input type="checkbox" name="shop" value="アマゾン"> アマゾン</label>
  <label><input type="checkbox" name="shop" value="Yahooショップ"> Yahooショップ</label>
  <label><input type="checkbox" name="shop" value="その他"> その他</label>
  <input type="submit" value="送信">
</form>

「indeterminate」で「あいまい表示」

チェックボックス（type="checkbox"）は「ONかOFFか」だけでなく、Javascript の 「indeterminateプロパティ」で「どっちでもない状態」の表示ができます。
「indeterminate（インデターミネート）」は「あいまいな、不確定な」という意味。
これは外観を変更するだけ。データの内容に影響はなく、この状態のままでユーザーが送信すれば、無選択なままです。

普段のご利用は：
当店 楽天市場 アマゾン Yahooショップ その他

IE 11, Edge など PCブラウザは対応しています。iOS Safari, Opera Mini は未対応。
（2017年12月記 / 参考：Can I Use | indeterminate checkbox）
対応ブラウザでは下記のような表示になります。

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

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

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「ラジオボタン・チェックボックス」の部品以外は、下記の一覧をご覧ください。

• <input>要素の type属性の値一覧

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

• <input>要素の 他の属性一覧

次回予告

次回は同じ <input type=""> で 「時間」を選択するフォーム部品を作りましょう。
type属性の新しい値、datetime-local, date, month, week, time は「年月日や時間」をチョイスしてもらう フォーム部品です。