【HTML】labelでクリック範囲を広げる方法

こんにちは、素人エンジニアです。
「ラジオボタンがクリックしにくい！！」
そんなあなたに、テキスト部分をクリックできるラジオボタンの作り方とサンプルを紹介しましょう。
labelタグを使うと、ラジオボタンのテキスト部分をクリックしたら選択できるようになります。

labelの使い方

labelで囲むパターン
<label><input type=”radio”> テキスト </label>

forを使うパターン
<input type=”radio” id=”ooo” ・・・>
<label for=”ooo”> テキスト </label>

テキストをクリックできるようにするには、labalタグで囲むか、for属性にラジオボタンのidを指定します。こうすることで、ラジオボタンのチェック部分だけでなく、テキスト部分をクリックしてもチェックが入るようになります。

ラジオボタンのサンプルコード

まずは、inputだけのラジオボタンを見てみましょう。クリックできるのは丸の部分だけです。これではマウスを合わせるのが大変です。

red　　　 blue　　　 yellow

<input type="radio" name="color" value="red">red
<input type="radio" name="color" value="blue">blue
<input type="radio" name="color" value="yellow">yellow

次に、labelタグで囲むパターンです。テキスト部分もクリックできるようになりました。

red　　　 blue　　　 yellow　　　

<label><input type="radio" name="color" value="red">red</label>

<label><input type="radio" name="color" value="blue">blue</label>

<label><input type="radio" name="color" value="yellow">yellow</label>

forを使うパターンでは、idを指定する必要があります。

<input type="radio" id="red" name="color" value="red">
<label for="red">red</label>

<input type="radio" id="blue" name="color" value="blue">
<label for="blue">blue</label>

<input type="radio" id="yellow" name="color" value="yellow">
<label for="yellow">yellow</label>

MDN Web Docsでは、forを使うパターンが紹介されていました。参考にしてください。

- HTML: ハイパーテキストマークアップ言語 | MDN

要素の radio 型は、一般にラジオグループ、すなわち関連するオプションの組み合わせを示すラジオボタンの集まりです。グループ内でラジオボタンは一つしか同時に選択することができません。ラジオボタンはふつう、小さな円で描かれ、選択されたら塗りつぶされたりや強調表示されたりします。

↓↓ HTMLとCSSの学習はこの1冊があれば安心！! ↓↓

リンク