仕様

LABEL要素は、
ユーザーインターフェイスの
票(キャプション)を
表します。

labelキャプション (form field Label text)
カテゴリ
  • フレージングコンテンツ
  • フローコンテンツ
  • インタラクティブコンテンツ
  • パルパブルコンテンツ
種類通常要素
この要素を
使用できる
状態		フレージングコンテンツを受け入れる要素。
許可されて
いる内容		フレージングコンテンツ。ただし、ラベル付け対象のコントロールでない限り、子孫のラベル付け可能な要素は配置できません。子孫の label要素はありません。
属性グローバル属性,
for
フォーム要素に関連付け
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		対応する役割なし
DOM
インター
フェイス
HTMLLabelElement
  1. [Exposed=Window]
  2. interface HTMLMeterElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. readonly attribute HTMLFormElement? form;
  6. [CEReactions] attribute DOMString htmlFor;
  7. readonly attribute HTMLElement? control;
  8. };
レンダリング
特になし
参加
コンテキスト		インラインフォーマットコンテキスト
確立
コンテキスト		インラインフォーマットコンテキスト
label要素は、ユーザーインターフェイスの票(キャプション)を表します。

票(キャプション)は、for属性を使用するか、フォーム要素をラベル要素自体の中に置くことにより、ラベル要素のラベル付きコントロールと呼ばれる特定のフォームコントロールに関連付けることができます。

  1. <pre>
  2. <label>label
  3. <input></label>
  4. </pre>
参照元
  1. HTML Living Standard. 4.10.4 The label element
  2. HTML 5.2 W3C 勧告. 4.10.4 The label element
  3. HTML 4.01 Specification W3C 勧告. 17.9.1 The LABEL element
  4. MDN Web Docs. HTML <label>:

使用可能な箇所

フレージングコンテンツを
受け入れる要素に
配置できます。

label要素は、フレージングコンテンツを受け入れる要素に配置できます。
フレージングコンテンツは、フローコンテンツのタイプの１つです。フローコンテンツを受け入れる要素でも配置できます。

インタラクティブコンテンツでもあるので、インタラクティブコンテンツを受け付けない要素には配置できません。

  1. <pre>
  2. <label for="iipLabel21">label</label>
  3. <input id="iipLabel21">
  4. </pre>

フレージングコンテンツを配置できる pre要素のコンテンツの一部として、label要素を配置できます。

配置できるコンテンツ

フレージングコンテンツを
配置できます。

label要素は、フレージングコンテンツを配置できます。ただし、ラベル付け対象のコントロールでない限り、子孫のラベル付け可能な要素は配置できません。子孫の label要素はありません。

  1. <label>
  2. label
  3. <input>
  4. </label>

label要素のコンテンツの一部として、フレージングコンテンツである input要素を配置できます。
type属性が hidden でない input要素はラベル付け可能な要素ですので、label要素自体の中に置くことにより関連付ける事ができます。 for属性が指定されていないが、label要素にラベル付け可能要素の子孫がある場合、ツリー順で最初のそのような子孫は label要素のラベル付きコントロールです。

for属性

  1. <label for="iipLabel41">label</label>
  2. <input id="iipLabel41">

for属性は、ラベル付け可能な要素のid属性値を指定します。キャプションが関連付けられるフォームコントロールを示すために指定できます。 属性が指定されている場合、属性の値は、label要素と同じツリー内のラベル付け可能な要素のIDである必要があります。 属性が指定され、IDが for属性の値と等しい要素がツリー内にあり、ツリー順で最初のそのような要素がラベル付け可能な要素である場合、その要素はラベル要素のラベル付きコントロールです。

気を付ける点

関連付け

label要素は、for属性を用いてラベル付け可能な要素と関連付けができます。for属性がなくても、label要素のコンテンツの一部にあるラベル付け可能な要素と関連付けがされます。

インタラクティブコンテンツ

label要素は、インタラクティブコンテンツですがインタラクティブコンテンツの子孫を受け入れない要素ではありません。 button要素は、ラベル付け可能な要素でありインタラクティブコンテンツでもあります。 その結果、label要素に button要素を関連付けると、ユーザーのlabel要素に対する操作が button要素に伝わりますので、意図する動作か配慮する必要があります。

  1. <form>
  2. <label>ラベル<br><br>
  3. <button formaction="./form.htm">UP PAGE</button>
  4. </label>
  5. </form>

例示のbutton要素は、label要素の最初のラベル付け可能な要素である子要素なので関連付けられます。