HTMLのlabelタグで、ラジオボタン等のクリックできる範囲を広げる方法です。
目次
| サンプル | クリック範囲を広げるとは |
| 方法1：labelのforとIDと結びつけてクリック範囲を広げる | |
| 方法2：labelで囲んでクリック範囲を広げる | |
| 参考：ラベルにショートカットのキーを付与する |
クリック範囲を広げるとは
labelタグを使用すると、ラジオボタンの丸い箇所だけでなく、ラジオボタンの横にある文字をクリックして値を選択できます。ラジオボタンやチェックボックスなどで使用できます。
label要素がない場合
以下のラジオボタンは、丸の部分のみしかクリックできません。
| １．押せる場所：丸い箇所のみ 赤です 黄です 青です |
label要素がある場合
以下は、丸とラベルの部分のクリックで選択できます。クリックできる範囲が広くなっています。
使う人にやさしいのでぜひ取り入れましょう。
| ２．押せる場所：丸い箇所＋ラベル |
方法1：labelで囲んでクリック範囲を広げる
| <label><(ラジオボタン等)>文言</label > |
ラジオボタン等をlabelで囲むと文字もクリック可能範囲になります。
<p>
<label><input type="radio" name="cr2" id="c6" value="青" />青です</label>
</p>ラジオボタンをlabelで囲んでいます。
方法２：labelのforとIDと結びつけてクリック範囲を広げる
| <(ラジオボタン等 id="abc")> <lablel for="abc">文言</label> |
<p>
<input type="radio" name="cr3" id="c7" value="赤" checked />
<label for="c7">赤です</label>
</p>ラジオボタンのid="c7"とlabelのfor="c7"が結びついています。
ラジオボタンの他にも、チェックボックスやテキストボックスなどでもできます。
参考：ラベルにショートカットのキーを付与する
| <label accesskey="値"> |
- ラベルにショートカットのキーを付与できます。
- label要素にaccesskey属性を追加します。
- 動作させる操作はOSとブラウザによって異なります。
- WindowsのGoogle Chromeではalt+keyです。
accesskeyのサンプル
WindowsのGoogle Chromeの場合は、「alt + キー」を押します。
「alt + a」または「alt + b」または「alt +c」を押して下さい。
上記サンプルのコードです。
<label accesskey="a"><input type="radio" name="cr4" value="赤" checked>赤です(a)</label>
<label accesskey="b"><input type="radio" name="cr4" value="黄">黄です(b)</label>
<label accesskey="c"><input type="radio" name="cr4" value="青">青です(c)</label>
label要素にaccesskey属性を追加しています。
以下は、MDNのaccesskey属性のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/accesskey
関連の記事