Question

来自HTML5最终规范（http://www.w3.org/TR/html5/forms.html#attr-label-for）的引用：

可以指定for属性以指示与标题相关联的表单控件。如果指定了该属性，则属性的值必须是与标签元素位于同一Document中的ID的{{1}}。如果指定了属性并且文档中有labelable element等于ID属性值的元素，则并且第一个此类元素为{{1然后，该元素是标签元素的标记控件。

最后一句话措辞奇怪：它在单个元素中讨论“第一个这样的元素”并且似乎暗示在具有相同ID的文档中可以存在多个元素。粗体部分是否应该被理解为“和那个元素”？

EDIT。回答我的问题的人似乎相信规范正在定义一个行为，以防其中一个规范规则（唯一ID）被破坏。这对我来说听起来完全不可信。如果你违反了规范中的规则，那么你将面临自己的危险并获得未定义的行为。我从来没有看到过这样的规范：这是规则，但是如果你打破它，不要担心，事情仍然可以这样工作。

Answer 1

我不为作者说话，但我认为它本来应该按原样阅读。

如果指定了属性并且Document中有一个元素，其ID等于for属性的值，并且第一个这样的元素是labelable元素，那么该元素是标签元素的标记控件。

请注意，我强调了第一个这样的元素。考虑一个有两种形式的场景。有两种input可能有不同形式的id label。您可以使用两个label来表示每个输入。该规范的含义是for是input第一个id，文档中匹配label。换句话说，如果您有两组for=elm input和for=elm label，则input都将指向<{1}} strong>第一个input 。

看看这个：http://jsfiddle.net/Lxg5rrk6/2/

此外，我强烈建议您不要在同一页面中使用相同id代表两个Post，但现在可能会明白它会破坏您的页。

Answer 2

它解决了这样一个事实：虽然应该只是一个具有唯一ID的元素，但可能有更多，无论是设计还是错误。在这种情况下，标签仅适用于第一个标签。

注意： 我完全改写了这个答案。我最初假设了＆＃34;控制阵列＆＃34;仅适用于现已折旧的VBScript引擎。经过进一步调查，我发现JavaScript仍然支持它们。

＆＃34;控制阵列＆＃34;有一个记录很少且不支持的概念。通过为控件提供相同的ID来创建。然后对它们进行区分并将其作为ID [0]，ID [1]等进行寻址。请注意，JavaScript代码不使用：

theDivs[0]...

如果有，请求将遵循规范并仅返回第一个元素。相反，元素直接表示为：

window.onload = function() { theDivs[0].style.backgroundColor = "blue"; theDivs[1].style.backgroundColor = "red"; theDivs[2].style.backgroundColor = "green"; }

运行以下代码片段，了解如何在JavaScript中处理三个具有相同名称的DIV，并且还应用了CSS。

重要提示：我不是在暗示应该使用这种技术。此处的信息仅用于说明HTML规范未明确禁止多次使用同一ID的一个原因。

＆＃13;
＆＃13;
#theDivs { color: white; margin: 0 auto 10px; text-align: center; width: 250px; }
＆＃13;
<body> <div id="theDivs">I'm the 1st div with ID = "theDivs"</div> <div id="theDivs">I'm the 2nd div with ID = "theDivs"</div> <div id="theDivs">I'm the 3rd div with ID = "theDivs"</div> </body>
＆＃13;
SELECT User.username, User.ID, Count(Log.id) LogCount FROM users User LEFT JOIN logs Log ON User.ID = Log.id GROUP BY User.ID, User.username ORDER BY LogCount DESC LIMIT 10
＆＃13;
＆＃13;
＆＃13;

Answer 3

似乎HTML5规范中引用的短语没有拼写错误，并且确实在其他规范规则之一（ID必须唯一）被破坏时定义了一种行为。以下是另一个W3C规范（W3C DOM4）的引用，其中的方式再次考虑了文档中存在重复ID的元素的存在（注意以粗体显示的部分）：

http://www.w3.org/TR/dom/#dom-nonelementparentnode-getelementbyid

getElementById(elementId)方法必须以树的顺序在上下文对象的后代中返回第一个元素，其ID为elementId，如果没有这样的元素，则返回null

W3C认为有必要在一个规范规则（ID必须是唯一的）被破坏的情况下定义行为的原因仍然是个谜。

Answer 4

这对我有意义，但这是解释;

由于for属性链接到id而不是class，因此它只会检测其类型的第一个id。

这就是我所定义的预期行为，因为任何页面都应该只有一个带有id名称的元素 - 如果你需要多个具有相同标识名称的元素，请使用{ {1}}。

总之，class将始终链接到指定了id的第一个元素。

快速的JS小提琴;

http://jsfiddle.net/5fz19n64/1/

您会注意到它始终将重点放在for字段上。

用于属性澄清的HTML5标签

4 个答案: