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 Fiddle demo

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

不幸的是，就我尚未找到而言，没有明确允许input（或类似元素）链接到一个控件的引用或文档;但是MDN的<label>条目确实说明了：

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

<label> for attribute必须是唯一的吗？</label>

1 个答案: