label 要素

概要

HTML の Label 要素 (<label>) はユーザインタフェース内のアイテムのキャプションを表します。for 属性を用いるか、コントロール要素を <label> の子要素として配置する事で、ラベルとコントロールを紐付ける事が出来ます。その様に紐付けられたコントロールは、ラベル要素の labeled control（ラベル付きコントロール） と呼ばれます。

コンテンツカテゴリ フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ、フォーム関連要素、パルパブルコンテンツ
許可された内容 フレージングコンテンツ。ただし、他の label 要素の子孫要素として配置してはならない。また、そのラベルが示すもの以外のラベル付け可能フォームコントロール要素を入れてはならない。
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フレージングコンテンツを受け入れるすべての要素
DOM インターフェイス HTMLLabelElement

属性

この要素は、全てのHTML 要素が持つ グローバル属性と、次の属性をサポートします。

accesskey HTML 4 HTML5
キーボードからこの要素にアクセスする為のショートカットキー
for
ラベル要素と同一の文書内にあるラベル付け可能フォーム関連要素の ID。文書中の for 属性の値と合致する ID を持つ最初の要素が、このラベル要素の示すラベル付きコントロールとなります。
注記: for 属性が包含するコントロール要素を指すのであれば、label 要素で for 属性と包含するコントロール要素の両方を持つことができます。
form HTML5
ラベル要素と紐付けたフォームコントロールが属するフォーム(form owner)。属性値は、同一の文書内にある <form> 要素の ID としなければなりません。この属性が指定されていない場合、この<label> 要素とその指し示すフォームコントロールは <form> 要素の子孫要素として配置しなければなりません。HTML5 で導入されたこの属性により、label 要素をフォーム要素の子孫としてだけではなく、同一文書の何処にでも配置出来るようになりました。

例

シンプルな label の例

<!-- ※ input 要素に for 属性を用いるのでなく、label 要素の子要素として配置する事によりこれらを紐付ける例 -->
<label>Click me <input type="text" id="Name" name="Name" /></label>

"for" 属性の使用例

<!-- ※ label 要素と for 属性付き input 要素を併記する例 -->
<label for="username">Click me</label>
<input type="text" id="username">

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
<label> の定義		 現行の標準  
HTML5
<label> の定義		 勧告  
HTML 4.01 Specification
<label> の定義		 勧告 最初の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) (有)[1] (有) (有) (有)
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有)[1] (有) (有) (有)

[1] Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5) 以降では、クリックイベントのバブリングは 1 つの <label> 要素のみをトリガーし、他の <label> 要素のそれと合成されたクリックイベントをトリガーすることはありません。WebKit や Internet Explorer ではクリックイベントのバブリングは <label> で止まりますが、Gecko ではクリックイベントは <label> 要素の上位のノードにも続けてバブルアップします。Gecko 8.0 以前の動作 (複数の <label> 要素をトリガーする動作) は、Firefox が応答を停止する原因となっていました (バグ 646157)。

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: sii, teoli, hrysd, yyss, ethertank
 最終更新者: sii,