Updated / Published

label要素(form field label text)はフォームのコントロール部品の各部が何であるかを示す・説明するラベルを指定します。任意のコントロール部品の id属性 の値に対して label要素の for属性 の値を一致させる必要があります。これによりラベル部分のテキストを選択するだけで対応するテキスト入力欄にフォーカスが移ったり、チェックボックスにチェックが入るようになります。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
要素型
インライン要素
開始タグ
必須
終了タグ
必須
非推奨
-
内容モデル

for属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
label
必須
-
非推奨
-
属性値
コントロール部品の id属性の値

各コントロール部品の説明となるラベルの ID名を指定します。input要素, textarea要素などの各コントロール部品に指定した id属性の値と label要素の for属性の値を一致させる必要があります。これにより label要素に対応した UA であればポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)の左ボタンでラベル部分のテキストを押すだけで対応するテキスト入力欄にフォーカスが移ったり、チェックボックスにチェックが入るようになります(Safari には label要素のテキストを選択してもフォーカスが移ったり、チェックボックスが選択される機能はありませんが、CSS の装飾は反映されるので一応、label要素自体には対応しているようです)。

また、次のようにフォームのコントロール部品を label要素の中に含めることで、for属性 や id属性を指定する必要はなくなります。

<p><label>姓: <input type="text" name="sei"></label></p>
<p><label>名: <input type="text" name="mei"></label></p>

ただし、この機能に Internet Explorer 6, 7, 8 は対応していません。IE9から対応しています。

その他の属性

共通属性
イベント属性

label要素のサンプル

label要素を指定することでフォームの操作が容易になりアクセシビリティ向上に繋がります。

興味がある内容を選択してください(複数可)<br>
<input type="checkbox" name="cate" value="travel" id="travel">
<label for="travel">旅行</label>
<input type="checkbox" name="cate" value="movie" id="movie">
<label for="movie">映画</label>
<input type="checkbox" name="cate" value="music" id="music">
<label for="music">音楽</label>
<input type="checkbox" name="cate" value="cooking" id="cooking">
<label for="cooking">料理</label>
<input type="checkbox" name="cate" value="sports" id="sports">
<label for="sports">スポーツ</label>
<input type="checkbox" name="cate" value="shooping" id="shopping">
<label for="shopping">ショッピング</label>