用于属性说明的 HTML5 标签答案

【问题标题】：HTML5 label for attribute clarification用于属性说明的 HTML5 标签
【发布时间】：2015-09-22 16:15:50
【问题描述】：

引自 HTML5 最终规范 (http://www.w3.org/TR/html5/forms.html#attr-label-for)：

可以指定for 属性来指示与标题关联的表单控件。如果指定了属性，则属性的值必须是与标签元素在同一文档中的labelable element 的ID。如果指定了属性并且 Document 中有一个元素的ID 等于for 属性的值，并且第一个这样的元素是labelable element，那么该元素是标签元素的标签控件。

最后一句话措辞奇怪：它在单个元素中谈论“第一个这样的元素”，似乎暗示文档中可以有多个具有相同 ID 的元素.粗体部分是否意味着被解读为“and that element”？

编辑。回答我的问题的人似乎认为规范正在定义一种行为，以防规范规则（唯一 ID）之一被破坏。这对我来说听起来完全不可信。如果您违反规范中的规则，您将自担风险并获得未定义的行为，期间。我从来没有见过这样的规范：这是规则，但如果你违反它，别担心，事情仍然会像这样那样工作。

【问题讨论】：

我已将此添加到下面的答案中，以解决您的问题：在 VBScript 中有一个“控件数组”的概念，它是通过为控件提供相同的 ID 而创建的。然后将它们区分并寻址为 ID(0)、ID(1) 等。这样实现的这个概念在 JavaScript 中不存在。 VBScript 不应再用于客户端脚本，但它仍然存在。因此，虽然 ID 应该是唯一的，但不禁止复制它们。
“禁止”可能不是描述这一点的最佳术语。具有重复的id 属性是invalid，并且规范描述了浏览器遇到这种无效条件时的行为。一般来说，浏览器可以容忍标记中的无效条件，并在可能的情况下寻求修复它们或回退到合理的行为。
@steveax 浏览器是宽容的 - 是的，但规范考虑到违反其规则之一？有很多事情可能会破坏 HTML5 规则，按照您的逻辑 HTML5 应该考虑所有（或更多）？然而它并没有这样做，除了只在这个特定的地方（大约labelfor）——这让我认为这是一个错字，而不是故意考虑到这种无效标记。

标签： html

【解决方案1】：

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

注意： 我已经完全重写了这个答案。我最初假设“控制数组”的概念仅适用于现在已被贬低的 VBScript 引擎。经过进一步调查，我发现 JavaScript 仍然支持它们。

有一个记录很少且不支持的“控件数组”概念，它是通过为控件提供相同的 ID 而创建的。然后将它们区分并寻址为 ID[0]、ID[1] 等。请注意，JavaScript 代码不使用：

document.getElementById("theDivs")

如果这样做，请求将遵循规范并且只返回 first 元素。相反，这些元素被直接寻址为：

theDivs[0]...

运行以下代码 sn-p 以查看如何在 JavaScript 中寻址三个同名 DIV 并应用 CSS。

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

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

#theDivs {
  color: white;
  margin: 0 auto 10px;
  text-align: center;
  width: 250px;
}

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

【讨论】：

为什么规范会先定义一个规则（禁止非唯一ID），然后考虑到前面的规则可能被破坏，然后再表述下一个规则？
在 VBScript 中有一个“控件数组”的概念，它是通过赋予控件相同的 ID 而创建的。然后将它们区分并寻址为 ID(0)、ID(1) 等。这样实现的这个概念在 JavaScript 中不存在。因此，虽然 ID 应该是唯一的，但不禁止复制它们。我想我会把这个添加到我的答案中。
HTML5 规范中没有提到允许在文档中插入具有重复 ID 的新元素。这样做会使文档无效（因为 HTML5 禁止在同一文档中使用非唯一 ID）。无效的文档=未定义的行为，不需要在其他规范规则的定义中考虑。
@PowerGamer，我不确定你是想不同意我说的话，还是你不明白。请说清楚。请注意，在 HTML 5 规范中也没有禁止它们。如果是的话，就不会发生这种对话。此外，VBScript 已过时，不应再用于客户端脚本。所以这在 HTML 5 中不是问题。
The value must be unique amongst all the IDs in the element's home subtree here w3.org/TR/html5/dom.html#the-id-attribute 这意味着规范禁止非唯一 ID，无论这些非唯一 ID 如何进入文档。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

我不代表作者发言，但我认为它应该按原样阅读。

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

请注意，我首先强调了这样的元素。考虑一个有两个表单的场景。有可能有两个inputs 具有相同的id，但形式不同。您可以使用两个labels 来表示每个输入。规范的意思是labels 是for 第一个input 与文档中的匹配id。换句话说，如果您有两组label 和for=elm 和input 和for=elm，则label 都将指向第一个input.

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

另外，我强烈建议您不要在同一页面中使用相同的 id 表示两个 inputs，尽管现在您可能已经清楚这会破坏您的页面。

【讨论】：

【解决方案4】：

这对我来说很有意义，但这里是解释；

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

这是我将其定义为预期行为的原因，因为任何页面都应该只有一个具有 id 名称的元素 - 如果您需要多个具有相同标识名称的元素，请使用 class .

总而言之，for 将始终链接到具有指定 id 的第一个元素。

一个快速的 JS 小提琴；

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

您会注意到它总是将焦点放在1st username 字段上。

【讨论】：