ラジオボタン<input type="radio"> | HTML タグ

ラジオボタンは、複数の選択肢の中から、1つだけ選択してもらう場合に使うフォーム部品。

概要

  • <input type="radio">のように、type属性に、radioを指定することで、ラジオボタンとなる。
  • フォームデータを送信する際、name属性で指定したフォーム部品の名前と、value属性で指定した値が、送信される。
  • name属性の名前を同じにし、value属性の値を変えることで、一つの選択肢グループとなる。

属性

type=""

radioを指定。

name=""

フォーム部品の名前。

value=""

送信される値。

checked

選択された状態にする。

選択肢の中の一つだけに指定できる。

disabled

無効化する。

これを指定した選択肢は、選択できなくなる。

JavaScript と組み合わせて使用することが多い。

ラジオボタンの使用例

基本例

ソース
1
2
3
4
<input type="radio" name="music" value="pop" checked> ポップス
<input type="radio" name="music" value="rock"> ロック
<input type="radio" name="music" value="other"> その他
<input type="radio" name="music" value="mukou" disabled> 無効化
表示

ポップス

ロック

その他

無効化

ラベル要素との併用例

ラベル要素<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>
表示





スポンサード リンク

カテゴリー: HTML, フォームタグ パーマリンク