html - for 属性必须是唯一的吗？

Question

我可以有两个具有相同for值的标签吗？例子：

<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属性将一个控件链接到一个input，据我所知，可以链接到一个的元素的数量没有限制input，只要id那个input（或textarea，select等）是唯一的。

例如，在以下演示中，两个 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（或类似元素）仅链接到一个控件的参考或文档；但是MDN的条目<label>确实指出：

与标签元素在同一文档中的可标记表单相关元素的 ID。文档中第一个具有与 for 属性值匹配的 ID 的此类元素是该标签元素的标签控件。