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

HTMLのlabelタグで、クリックできる範囲を広げる方法です。
ラジオボタンやチェックボックスなどで使用できます。

仕様 label要素
サンプル label要素のサンプル
  ラベルにショートカットのキーを付与する

label要素

方法1.<label><(ラジオボタン等)>文言</label >
方法2.<(ラジオボタン等  id="xxx")>
<lablel for="xxx">文言</label>

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

方法1.ラジオボタンの要素をlabel要素で囲む。
方法2.label要素にfor属性を追加し、値にラジオボタンのID値を指定する。

ラジオボタンの他にも、チェックボックスやテキストボックスなどでもできます。

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

label要素のサンプル

label要素のサンプルです。
以下のラジオボタンは、丸の部分のみクリックすると選択されます。

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

以下は、丸の部分とラベルの部分をクリックすると選択できます。

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

以下は、label要素にfor属性を追加したサンプルです。丸の部分とラベルの部分をクリックすると選択できます。

3.押せる場所:丸い箇所+ラベル for属性を使用

コード

上記サンプルのコードです。

<p>1.押せる場所:丸い箇所のみ<br />
<input type="radio" name="cr1" id="c1" value="赤" checked>赤です
<input type="radio" name="cr1" id="c2" value="黄">黄です
<input type="radio" name="cr1" id="c3" value="青">青です
</p>

<p>2.押せる場所:丸い箇所+ラベル<br />
<label><input type="radio" name="cr2" id="c4" value="赤" checked>赤です</label>
<label><input type="radio" name="cr2" id="c5" value="黄">黄です</label>
<label><input type="radio" name="cr2" id="c6" value="青">青です</label>
</p>

<p>3.押せる場所:丸い箇所+ラベル for属性を使用<br />
<input type="radio" name="cr3" id="c7" value="赤" checked>
<label for="c7">赤です</label>
<input type="radio" name="cr3" id="c8" value="黄">
<label for="c8">黄です</label>
<input type="radio" name="cr3" id="c9" value="青">
<label for="c9">青です</label>
</p>

2~4行目は、何も付加していないラジオボタンです。
8~10行目は、label要素の子要素にラジオボタンがあります。
14~19行目は、label要素にfor属性を追加しています。

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

  • ラベルにショートカットのキーを付与することができます。
  • label要素にaccesskey属性を追加します。
  • 動作させる操作はOSとブラウザによって異なります。
    WindowsのGoogle Chromeではalt+keyです。
  • 以下は、MDNのaccesskey属性のリンクです。
    https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/accesskey

サンプル

accesskeyのサンプルです。
WindowsのGoogle Chromeの場合は、「alt + キー」を押します。
「alt + a」または「alt + b」または「alt +c」を押して下さい。

コード

上記サンプルのコードです。
label要素にaccesskey属性を追加しています。

<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>

関連の記事

HTML rowspan テーブルのセルを縦につなげる
HTML colspan テーブルのセルを横につなげる
HTML cellpadding テーブルのセル内の余白を指定する
HTML cellspacing テーブルのセルの間隔を指定する
HTML テーブルの幅を指定するサンプル(width)
HTML リストを作成するサンプル(ul/li/ol)

△上に戻る