Question

W3Schools有关于labels的说法：

<label>标记定义输入元素的标签。 _{[强调我的]}

这是否意味着以下HTML无效？

<!doctype html>
<html>
    <head>
         <title>Example document</title>
    </head>
    <body>
        <label for="x">Label</label> 
        <hr>
        <div id="q" contentEditable="true">Hello</div>
        <hr>
        <div id="x" contentEditable="true">World</div>
    </body>
</html>

点击World时，Chrome和IE8都会关注Label，而Firefox则不会。哪个是对的？

Answer 1

根据W3C适用于表单控件，表单控件为defined as：

按钮
复选框
单选按钮
菜单
文字输入
文件选择
隐藏控件
对象标签

所以FireFox在技术上是正确的，虽然如果浏览器没有将它限制在那些元素中，我几乎不会认为它是“破坏”。

Answer 2

HTML规范说，关于label的“for”属性，“当存在时，此属性的值必须与同一文档中某些其他控件的id属性的值相同。如果不存在，则定义的标签与元素的内容相关联。“

因此“for”中的id引用应该是控件的id引用。什么是控制？该规范基本上表示任何input都是一个控件，button，select或object也是如此。所以Firefox在技术上是正确的 - div不是控件。

Answer 3

我想说这不适合使用标记，因为标签语义是它们专门用于控件。

LABEL元素用于指定没有控件的标签隐式标签，

http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1

Answer 4

最新的WhatWG规范说：

某些元素（并非全部与表单相关）被归类为可标记元素。这些是可以与标签元素关联的元素。


button，input（如果type属性未处于“隐藏”状态），meter，output，progress，{ {1}}，select


...

可以指定textarea属性以指示与标题相关联的表单控件。如果指定了属性，则该属性的值必须是与for元素在同一树中的可标记元素的ID。

（来源：https://html.spec.whatwg.org/multipage/forms.html。）

换句话说，该标准仅允许label属性指向上面列出的7种标记类型之一的元素。因此，问题中显示的HTML（使用for元素指向可编辑的for）在当前规范下在技术上是无效的HTML。

Nu Html Checker（即endorsed by WhatWG）同意；如果您要求它从问题中验证HTML文档，则会显示：

错误：div元素的for属性的值必须是非隐藏表单控件的ID。

标签只能引用输入元素吗？

4 个答案: