ラジオボタンは、複数の選択肢の中から、1つだけ選択してもらう場合に使うフォーム部品。
概要
<input type="radio">のように、type属性に、radioを指定することで、ラジオボタンとなる。- フォームデータを送信する際、name属性で指定したフォーム部品の名前と、value属性で指定した値が、送信される。
- name属性の名前を同じにし、value属性の値を変えることで、一つの選択肢グループとなる。
属性
- type=""
-
radioを指定。
- name=""
-
フォーム部品の名前。
- value=""
-
送信される値。
- checked
-
選択された状態にする。
-
選択肢の中の一つだけに指定できる。
- disabled
-
無効化する。
-
これを指定した選択肢は、選択できなくなる。
-
JavaScript と組み合わせて使用することが多い。
ラジオボタンの使用例
基本例
| ソース | ||
|---|---|---|
|
||
| 表示 | ||
|
ポップス ロック その他 無効化 |
ラベル要素との併用例
ラベル要素<label></label>と併用することで、ラジオボタンと説明文（キャプション）のテキストを関連付けることができる。これにより、テキストをクリックすると、該当するラジオボタンがアクティブになるようになる。
| ソース |
|---|
|
<input type="radio" name="music" value="pop" id="radio-pop" checked> <label for="radio-pop">ポップス</label> <input type="radio" name="music" value="rock" id="radio-rock"> <label for="radio-rock">ロック</label> <input type="radio" name="music" value="other" id="radio-other"> <label for="radio-other">その他</label> |
| 表示 |
|
|