MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

label 要素

HTML <label> 要素はユーザーインターフェイス内のアイテムのキャプションを表します。

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

属性

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

for
ラベル要素と同一の文書内にある ラベル付け可能 フォーム関連要素の ID。文書中の for 属性の値と合致する ID を持つ最初の要素が、このラベル要素の示すラベル付きコントロールとなります。
注記: for 属性が包含するコントロール要素を指すのであれば、label 要素で for 属性と包含するコントロール要素の両方を持つことができます。
form HTML5
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 で実装しました。

関連情報

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

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