html - for 属性は一意である必要がありますか?

Question

for同じ値を持つ 2 つのラベルを持つことはできますか? 例：

<label for="foo">Outer label</label>
<div class="foo-bar">
    <input type="checkbox" id="foo" />
    <label for="foo">Inner label</label>
</div>

Answer 1

for属性はコントロールを にリンクします。私が知る限り、その(または、など) が一意である限り、input1 つにリンクできる要素の数に制限はありません。inputidinputtextareaselect

たとえば、次のデモでは、両方の 要素がチェックボックス要素labelの変更 (チェック/チェック解除) をトリガーします。input

<label for="foo">Outer label</label>
<div class="foo-bar">
    <input type="checkbox" type="checkbox" name="test" id="foo" />
    <label for="foo">Inner label</label>
</div>

JS フィドルのデモ。

これは、その要素の既存のものをオーバーライド/置換することなく、エラーが発生した要素に明示的にリンクするか、それ以外の場合は特定するエラー メッセージ (検証後など) を追加する場合に役立ちますlabel。

残念ながら、私がまだ見つけinputた限りでは、 (または同様の要素) を 1 つのコントロールのみにリンクすることを明示的に許可するリファレンスやドキュメントはありません。ただし、MDNのエントリ for dos には次のように記載され<label>ています。

label 要素と同じドキュメント内のラベル付け可能なフォーム関連要素の ID。for 属性の値に一致する ID を持つドキュメント内の最初の要素は、この label 要素のラベル付きコントロールです。