label要素(form field label text)はフォームのコントロール部品の各部が何であるかを示す・説明するラベルを指定します。任意のコントロール部品の id属性 の値に対して label要素の for属性 の値を一致させる必要があります。これによりラベル部分のテキストを選択するだけで対応するテキスト入力欄にフォーカスが移ったり、チェックボックスにチェックが入るようになります。
label要素を除く)各コントロール部品の説明となるラベルの ID名を指定します。input要素, textarea要素などの各コントロール部品に指定した id属性の値と label要素の for属性の値を一致させる必要があります。これにより label要素に対応した UA であればポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)の左ボタンでラベル部分のテキストを押すだけで対応するテキスト入力欄にフォーカスが移ったり、チェックボックスにチェックが入るようになります(Safari には label要素のテキストを選択してもフォーカスが移ったり、チェックボックスが選択される機能はありませんが、CSS の装飾は反映されるので一応、label要素自体には対応しているようです)。
また、次のようにフォームのコントロール部品を label要素の中に含めることで、for属性 や id属性を指定する必要はなくなります。ただし、この機能に Windows版Internet Explorer 6, Windows版Internet Explorer 7, Macintosh版Internet Explorer 5 は対応していません。この方法が有効なのは、Netscape, Firefox, Opera のみです。
<p><label>姓: <input type="text" name="sei"></label></p> <p><label>名: <input type="text" name="mei"></label></p>
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>
http://w3g.jp/xhtml/dic/label直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!