<label>标签的属性是否必须唯一？

Question

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

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

- mreq

---

作为旁注，您可以通过将它放在内部来避免它。 - Knu

Answer 1

for 属性将控件与 input 关联起来，据我所知，只要该 input（或 textarea、select 等）的 id 是唯一的，就可以有无限个元素链接到它。

例如，在以下演示中，两个 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 Fiddle演示。

这对于添加错误消息（例如，后验证）非常有用，可以明确地链接到或以其他方式标识存在错误的元素，而不会覆盖/替换该元素的预先存在的label。

不幸的是，就我所知，还没有明确允许将input（或类似元素）仅链接到一个控件的参考或文档；但是MDN的<label>条目确实指出：

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

- David Thomas

---

据我所知，您能提供一下参考资料吗？ - mreq

并没有明确说明只有一个元素必须只能由一个"label"元素的"for"属性链接（否则我会有意地引用该参考资料来完善答案）。然而，缺乏明确的限制是我相信它是有效的原因。例如，对于重复的"id"存在明确的限制，但是对于"label"元素的"for"属性不存在这样的限制。 - David Thomas

此外，需要注意的是，可标记元素，例如 input、button 和 select 元素，具有 labels IDL 属性（即通常术语中的 labels 属性），它是该元素的所有标签元素的节点列表。 - Alohci