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

发布于 2024-07-26 12:32:58 字数 900 浏览 4 评论 0原文

W3Schools 对于标签有这样的说法:

标签定义 input 元素的标签。 [强调我的]

这是否意味着以下 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>

当单击 Label 时,Chrome 和 IE8 都会将焦点放在 World 上,而 Firefox 不会。 哪个是对的?

W3Schools have this to say about labels:

The <label> tag defines a label for an input element.
[Emphasis mine]

Does this mean that the following HTML isn't valid?

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

Both Chrome and IE8 give focus to World when Label is clicked, Firefox does not.
Which is correct?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

三岁铭 2024-08-02 12:32:58

根据 W3C 它适用于表单控件和表单控件定义为

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

因此,FireFox 在技术上是正确的,尽管如果浏览器不将其限制为这些元素,我几乎不会认为它是“破坏性的”。

According to the W3C it applies to Form Controls, and Form Controls are defined as:

  • Buttons
  • Checkboxes
  • Radio buttons
  • Menus
  • Text input
  • File select
  • Hidden controls
  • Object tags

So FireFox is technically right, although I'd hardly consider it to be "breaking" if a browser didn't restrict it to those elements.

回忆追雨的时光 2024-08-02 12:32:58

HTML 规范规定,关于 label 的“for”属性,“当存在时,该属性的值必须与同一文档中其他控件的 id 属性的值相同。当不存在时,所定义的标签与元素的内容相关联。”

所以“for”中的 id 引用应该是一个控件的引用。 什么是控制? 该规范基本上规定任何 input 都是控件,buttonselectobject 也是如此。 所以 Firefox 从技术上来说是正确的——div 不是一个控件。

The HTML spec says, about label's "for" attribute, "When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents."

So the id references in "for" should be that of a control. What's a control? The spec basically says any input is a control, as is button, select, or object. So Firefox is technically right -- a div is not a control.

骷髅 2024-08-02 12:32:58

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

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

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

I would say it was not an appropriate use of the markup, because label semantics are that they are specifically for controls.

The LABEL element is used to specify
labels for controls that do not have
implicit labels,

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

行至春深 2024-08-02 12:32:58

最新的 WhatWG 规范是这样说的:

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

  • buttoninput(如果type属性不处于隐藏状态)、meter、<代码>输出,进度选择文本区域

...

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

(来源:https://html.spec.whatwg.org/multipage/forms.html 。)

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

Nu Html 检查器(即 由 WhatWG 认可)同意; 如果你要求它验证问题中的 HTML 文档,它会说:

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

The latest WhatWG spec has this to say:

Some elements, not all of them form-associated, are categorized as labelable elements. These are elements that can be associated with a label element.

  • button, input (if the type attribute is not in the Hidden state), meter, output, progress, select, textarea

...

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable element in the same tree as the label element.

(Source: https://html.spec.whatwg.org/multipage/forms.html.)

In other words, the standard only allows for attributes to point at elements of one of the 7 tag types listed above. The HTML exhibited in the question (which uses a for element to point to an editable div) is therefore technically invalid HTML under the current spec.

The Nu Html Checker (which is endorsed by WhatWG) agrees; if you ask it to validate the HTML document from the question, it will say:

Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文