<input>要素の"radio"型

<input>要素の”radio”型

フォーム内に「ラジオボタン」を設ける際に使用されます。チェックボックスとは異なり、「複数の選択肢から１つだけ選択させる」ような場合に用いられます。

属性

<input> 要素の radio型 では、以下の属性が使用できます。

value

radio型 の場合は、ラジオボタンの値として送信される文字列をvalue属性で指定します。画面上に表示されるテキストではない点に注意が必要です。
省略された場合、チェックボックスと同様、既定の値は”on”となりますが、ラジオボタンの用途を考えると、value属性は必ず指定したほうが良いでしょう。

name

ラジオボタンは通常、複数のラジオボタンをグループ化して、グループ化した中で１つしか選択できないようにする、という使い方をします。
その際に、name属性の値を同じにすることで、個々のラジオボタンがグループ化されます。

<label><input type="radio" id="contact1"
name="contact" value="email">電子メール</label>
<label><input type="radio" id="contact2"
name="contact" value="phone">電話</label>

上記のようにすると、「電子メール」か「電話」のどちらかを選択させるラジオボタンのグループとなります。

checked

論理属性で、指定されていれば、このラジオボタンがラジオグループ内でデフォルトで選択されます。

サンプル

See the Pen rNNabKL by Masahiko Iwakiri (@m-iwakiri) on CodePen.