label要素

コントロールとlabelを関連付けることで、ラベル部分をクリックしてもコントロールを機能させられるようになります。それがテキストボックスならばフォーカスが移動し、チェックボックスならばチェックされます。

ラベルなし Click me
Click me
ラベルあり

コントロールとの関連付け

コントロールと関連付けるには、次の2つの方法があります。

label要素に内包する

<label>
  Click me <input type="text" />
</label>

このとき内包できる要素は記述コンテンツ (phrasing content) に限られるため、それ以外には事項のfor属性で対応します。

for属性でidを指定する

コントロールのid属性と、labelのfor属性の値を一致させます。

<label for="foo">Click me</label>
<input id="foo" type="text" />

参考

HTMLの情報サイトから、まとめて検索