HTML <label> 要素はユーザーインターフェイス内のアイテムのキャプションを表します。
| コンテンツカテゴリー | フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ、フォーム関連要素、パルパブルコンテンツ |
|---|---|
| 許可された内容 | フレージングコンテンツ。ただし、他の label 要素の子孫要素として配置してはならない。また、そのラベルが示すもの以外の ラベル付け可能フォームコントロール要素 を入れてはならない。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フレージングコンテンツ を受け入れるすべての要素 |
| 許可された ARIA ロール | なし |
| DOM インターフェイス | HTMLLabelElement |
属性
この要素は、すべてのHTML 要素が持つ グローバル属性 と、次の属性をサポートします。
for- ラベル要素と同一の文書内にある ラベル付け可能 フォーム関連要素の ID。文書中の
for属性の値と合致する ID を持つ最初の要素が、このラベル要素の示すラベル付きコントロールとなります。注記:for属性が包含するコントロール要素を指すのであれば、label 要素でfor属性と包含するコントロール要素の両方を持つことができます。 formHTML5- label 要素と紐付けたフォームコントロールが属する form 要素 (form owner)。属性値は、同一の文書内にある
<form>要素の ID にします。この属性により、label 要素を form 要素の子孫としてだけではなく、同一文書のどこにでも配置できるようになりました。このコンテンツ属性は 2016 年 4 月 28 日に、HTML 仕様書から削除されました。ただしスクリプトは引き続き、読み取り専用のHTMLLabelElement.form属性にアクセスできます。これはラベルが関連付けられたコントロールが属するフォーム、あるいはラベルがフォームがコントロールに関連付けられていないかコントロールがフォームの一部ではない場合にnullを返します。
使用上の注意
- コントロール要素を
<label>の子要素として配置するかfor属性を用いることで、ラベルとコントロールを紐付けることができます。そのように紐付けられたコントロールは、ラベル要素のラベル付きコントロール (labeled control)と呼ばれます。ひとつの input を複数のラベルに紐付けることができます。 - ラベル自体は、フォームに直接関連付けられません。ラベルは自身が関連付けられるコントロールを通して、間接的にフォームに関連付けられます。
例
シンプルな label の例
<!-- ※ input 要素に for 属性を用いるのでなく、label 要素の子要素として配置する事によりこれらを紐付ける例 --> <label>Click me <input type="text"></label>
"for" 属性の使用例
<!-- ※ label 要素と for 属性付き input 要素を併記する例 --> <label for="username">Click me</label> <input type="text" id="username">
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| HTML Living Standard <label> の定義 |
現行の標準 | |
| HTML5 <label> の定義 |
勧告 | |
| HTML 4.01 Specification <label> の定義 |
勧告 | 最初の定義 |
ブラウザー実装状況
| 機能 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本サポート | (有) | (有) | (有)[1] | (有) | (有) | (有) |
| 機能 | Android | Edge | 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)。
[2] 2016 年 4 月に HTML 仕様書が更新されて、form 属性が非推奨になりました。スクリプトから引き続き使用できますが、定義が変わりました。ラベルが関連付けられたコントロールが属するフォーム、あるいはラベルがフォームがコントロールに関連付けられていない (HTMLLabelElement.control が null である) 場合に null を返します。HTMLLabelElement.form をご覧ください。
この変更は Firefox 49 で実装しました。
関連情報
- 他のフォーム関連要素:
<form>、<input>、<button>、<datalist>、<legend>、<select>、<optgroup>、<option>、<textarea>、<keygen>、<fieldset>、<output>、<progress>、<meter>