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

labelでクリック範囲を広げる HTML
スポンサーリンク

こんにちは、素人エンジニアです。
「ラジオボタンがクリックしにくい!!」
そんなあなたに、テキスト部分をクリックできるラジオボタンの作り方とサンプルを紹介しましょう。
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タグで囲むパターンです。テキスト部分もクリックできるようになりました。

<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を使うパターンが紹介されていました。参考にしてください。

<input type="radio"> - HTML: HyperText Markup Language | MDN
要素の radio 型は、一般にラジオグループ、すなわち関連するオプションの組み合わせを示すラジオボタンの集まりです。

コメント

タイトルとURLをコピーしました