HTML labelタグでクリックできる範囲を広げる

HTMLのlabelタグで、ラジオボタン等のクリックできる範囲を広げる方法です。

目次 クリック範囲を広げるとは
labelのforとIDと結びつけてクリック範囲を広げる
labelで囲んでクリック範囲を広げる
  ラベルにショートカットのキーを付与する

クリック範囲を広げるとは

label要素を使用すると、ラジオボタンの丸い箇所だけでなく、ラジオボタンの横にある文字をクリックして値を選択できます。ラジオボタンやチェックボックスなどで使用できます。

 

label要素がない場合

以下のラジオボタンは、丸の部分のみしかクリックできません。

1.押せる場所:丸い箇所のみ
赤です 黄です 青です

 

label要素がある場合

以下は、丸とラベルの部分のクリックで選択できます。クリックできる範囲が広くなっています。

2.押せる場所:丸い箇所+ラベル

 

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で囲んでクリック範囲を広げる

<label><(ラジオボタン等)>文言</label >

ラジオボタン等をlabelで囲むと文字もクリック可能範囲になります。

<p>
<label><input type="radio" name="cr2" id="c6" value="青" />青です</label>
</p>

ラジオボタンをlabelで囲んでいます。

以下は、MDNのlabel要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/label

 

ラベルにショートカットのキーを付与する

<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

関連の記事

HTML rowspan テーブルのセルを縦につなげる
HTML colspan テーブルのセルを横につなげる
HTML cellpadding テーブルのセル内の余白を指定する
HTML cellspacing テーブルのセルの間隔を指定する

△上に戻る