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

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

目次 label要素とは
labelの構文
  ラベルにショートカットのキーを付与する

label要素とは

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

label要素がない場合

以下のラジオボタンは、丸の部分のみクリックすると選択されます。

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

label要素がある場合

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

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

labelの構文

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

2つの方法があります。

方法1.ラジオボタンの要素をlabel要素で囲む。

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

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

サンプルのコードです。

<p>1.押せる場所:丸い箇所のみ</p>
<p>
  <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.押せる場所:丸い箇所+ラベル</p>
<p>
  <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属性を使用</p>
<p>
  <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>

3~5行目は、何も付加していないラジオボタンです。
10~12行目は、label要素の子要素にラジオボタンがあります。
17~22行目は、label要素にfor属性を追加しています。

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

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

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

△上に戻る