Go to information

label要素

  1. label要素
  2. for属性
  3. その他の属性
  4. サンプル

label要素

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

バージョン
要素型
インライン要素
開始タグ
必須
終了タグ
必須
非推奨
-
内包可能

for属性

バージョン
指定要素
label
必須
-
非推奨
-
属性値
コントロール部品の id属性の値

各コントロール部品の説明となるラベルの 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>

その他の属性

共通属性
イベント属性

address要素のサンプル

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>
表示例
現在位置
  1. W3G
  2. XHTML
  3. HTML辞典
  4. label要素
ナビゲーション
ステータス情報
作者
上田 遼
公開
2005-09-26T12:55:05+09:00
更新
2008-12-29T04:27:09+09:00
URI
http://w3g.jp/xhtml/dic/label
検索

実績:大阪学院 入試サイト New! / 三田市民病院 / 神戸女学院大学 入試サイト / 釣りサンデー