概要
HTML の Label 要素 (<label>) はユーザインタフェース内のアイテムのキャプションを表します。for 属性を用いるか、コントロール要素を <label> の子要素として配置する事で、ラベルとコントロールを紐付ける事が出来ます。その様に紐付けられたコントロールは、ラベル要素の labeled control（ラベル付きコントロール） と呼ばれます。
| コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ、フォーム関連要素、パルパブルコンテンツ |
|---|---|
| 許可された内容 | フレージングコンテンツ。ただし、他の label 要素の子孫要素として配置してはならない。また、そのラベルが示すもの以外のラベル付け可能フォームコントロール要素を入れてはならない。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フレージングコンテンツを受け入れるすべての要素 |
| DOM インターフェイス | HTMLLabelElement |
属性
この要素は、全てのHTML 要素が持つ グローバル属性と、次の属性をサポートします。
accesskeyHTML 4 HTML5- キーボードからこの要素にアクセスする為のショートカットキー
for- ラベル要素と同一の文書内にあるラベル付け可能フォーム関連要素の ID。文書中の
for属性の値と合致する ID を持つ最初の要素が、このラベル要素の示すラベル付きコントロールとなります。注記:for属性が包含するコントロール要素を指すのであれば、label 要素でfor属性と包含するコントロール要素の両方を持つことができます。 formHTML5- ラベル要素と紐付けたフォームコントロールが属するフォーム(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)。
関連情報
- 他のフォーム関連要素:
<form>、<button>、<datalist>、<legend>、<select>、<optgroup>、<option>、<textarea>、<keygen>、<fieldset>、<output>、<progress>、<meter>