W3G

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から対応しています。

その他の属性

共通属性

• accesskey
• class
• dir
• id
• lang
• style
• title
• xml:lang

イベント属性

• onblur,onfocus
• onclick
• ondblclick
• onkeydown,onkeypress,onkeyup
• onmousedown,onmousemove,onmouseup
• onmouseout,onmouseover

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>