HTMLラジオボタンはラベルで囲むと選択しやすくなる

HTMLのラジオボタンを設定する場合は、 ラベル(labelタグ)で囲むと選択できる範囲が広がるので、 ユーザーが選択しやすくなります。

次のサンプルコードでは ラジオボタン2つをそれぞれlabelタグで囲んでいます (value属性は省略)。 わかりやすいように、 labelタグを赤色の線で囲っていて、 枠線内をクリックすることでラジオボタンを選択することができます。

<label><input type="radio" name="test" checked>選択肢A</label>
<label><input type="radio" name="test">選択肢B</label>

表示結果

もしラベルが無い場合は、 下図のように、チェックボックスの丸の内側をクリックしないと 選択されません。

ラジオボタン

ユーザーにとって選択しやすいのは明らかにラベルがある方です。 ですからHTMLフォームにラジオボタンを配置する場合は、 ラベルとワンセットで設置しましょう。

HTML・CSS入門