<label>要素

Technical Summary

Definition / Categories

labelは任意の要素の説明を付ける汎用的な見出しではありません。対象はlabelableなフォーム部品に限られ、label自身を入れ子にしたり、複数のlabelable要素を曖昧なまま含めたりする構造は避けます。

Labelable elements

HTML Standardでlabelの対象になり得る主な要素は次のとおりです。inputはHidden stateを除きます。

div、p、通常のspanなどはlabelableなform controlではありません。これらにforで関連付けても、labelのlabeled controlにはなりません。

Determining the labeled control

for属性による明示的な関連付け

<label for="email">メールアドレス</label>
<input id="email" name="email" type="email">

forが指定されている場合、その値はlabelと同じtreeにあるlabelable要素のIDでなければなりません。同じIDを持つ要素がある場合も、tree orderで最初に見つかる要素がlabelableであることが条件です。その要素がlabelのlabeled controlになります。

子孫による暗黙の関連付け

<label>
  メールアドレス
  <input name="email" type="email">
</label>

forが指定されておらず、labelにlabelableな子孫がある場合は、tree orderで最初のlabelableな子孫がlabeled controlになります。content model上、対象のlabelable要素以外のlabelable要素や、別のlabel要素を同じlabel内に置くことはできません。

Content model / ID境界

明示的な関連付けでは、単に文字列が一致するだけでは不十分です。次の条件を一緒に確認します。

• forの値が、対象要素のidと一致する。
• labelと対象要素が同じtreeにある。
• tree orderで最初に一致する要素がlabelableである。
• ページ内のidを重複させず、対象を一意に判定できる。

labelはform ownerを指定する要素ではありません。labelのform IDL属性は、関連するlabeled controlがform-associatedであれば、そのcontrolのform ownerを返しますが、label自身にform content attributeがあるという意味ではありません。

Activation behavior

labelの正確な既定表示とbehavior、とくにactivation behaviorはplatformのlabel behaviorに合わせるべきものとして仕様に記述されています。platformによっては、labelをクリックすると対象のcontrolへfocusしたり、controlへのclick eventを発生させたりします。したがって「labelは必ずチェックを切り替える」と一般化してはいけません。

label内のinteractive contentを対象とするevent、およびその子孫を対象とするeventについては、labelのactivation behaviorは何もしない境界があります。リンクや別のbuttonをlabel内に置く構造は、操作対象が競合するため避けるのが安全です。

DOM Interface

label要素はHTMLLabelElementとして公開されます。

const label = document.querySelector('label');
label.control; // labeled control または null
label.form;    // control の form owner または null
label.htmlFor; // for content attribute の反映値

• controlは、labelのlabeled controlを返します。なければnullです。
• formは、labeled controlがform-associatedであるとき、そのform ownerを返します。条件を満たさなければnullです。
• htmlForは、for content attributeを反映する読み書き可能なIDL属性です。

Accessible nameとの関係

labelとの関連付けは、フォーム部品のaccessible nameを決めるnativeな情報源の1つです。HTML-AAMでは、controlにaria-labelやaria-labelledbyがない、または計算結果が空である場合に、関連付けられたlabelのsubtreeのtext equivalentを使う規則が示されています。controlの種類や複数labelの有無によって計算条件は変わります。

placeholder、見た目の近くに置いたテキスト、CSSの::beforeなどを、labelとの関連付けの代わりに扱ってはいけません。

Fact / Evidence（主張 / 根拠）

主要Factを、適用条件・確認状態・仕様上の根拠位置と対応付けています。実装差異や未実施の観測は、下のImplementation Evidenceに分けています。

Evidence

1. HTML Standard: The label element — 意味、category、content model、for、labeled control、activation behavior、DOM interface
2. HTML Standard: labelable elements — labelableなform-associated elementの範囲
3. HTML Accessibility API Mappings — 関連labelを含むaccessible nameの計算
4. Web Platform Tests — label association、activation、DOM API、accessibilityに関係するテストの対応付け先

Implementation Evidence

仕様上の主張とは別に、ブラウザー実装・WPT・アクセシビリティ観測を記録します。未実施の項目は確認済みとは扱いません。

共通fixture / 記録: <form id="evidence-form" method="get">内に、type省略のinput、for/idによる明示関連、label内inputの暗黙関連、required、disabled、submitとtype省略のbuttonを配置しました。環境: Chrome 152.0.0.0（Windows NT 10.0） / 確認日 2026-09-12。

WPTの対応付けにはWPTリポジトリ、アクセシビリティの基準にはHTML-AAMを参照します。

Coverage / Open Issues

• 確認済みlabelの意味、category、content model、labelable要素、for/idと暗黙の関連付けの基本
• 確認済みlabeled control、activation behaviorのplatform境界、HTMLLabelElementの主要API
• 確認済み関連labelとform controlのaccessible nameに関するHTML-AAMの入口
• 未完了ブラウザー別のfocus・click・default presentation、form-associated custom elementの実装差
• 未完了正確なWPT対応、各platformのアクセシビリティツリー、支援技術ごとの観測、歴史的変更

このページは初期Coverageです。label要素と関連するすべてのフォーム処理、アクセシビリティ実装、ブラウザー差異の検証完了を主張するものではありません。

Related surface

初心者向けのforとid、囲む書き方、フォーム部品へのlabelの付け方はYugienのlabel要素ページを参照してください。controlの状態はinput要素、送信とform ownerはform要素、labelableなbuttonはbutton要素でも確認できます。