我可以在<label>标签中使用<label>吗？

Question

通常我使用标签来指向标签，就像这样：

<label for='firstname'>First Name:</label>
<input type='text' id='firstname' />

现在我有这个。

<label for='firstname'>First Name:</label>
<label id='firstname'></label>

因为我以前没有遇到过这样的情况，所以是否可能为标签创建一个标签呢？ 当我应用JavaScript来更新值时，它会起作用吗？或者这是一个有效的W3C合规性？

我很困惑是否要使用它。

- Praveen

---

你用 http://validator.w3.org/ 进行过测试吗？ - Matthew Layton

也许这就是你感到困惑的原因。你似乎根本误解了label元素的目的。 - BoltClock

为什么你想要这样做呢？ - j08691

根据这个JSFiddle(http://jsfiddle.net/r9zx9/)，它应该可以工作。我已经给第一个标签也分配了一个ID，这样它就可以被JavaScript的document.getElementByID访问到了。 - Bjorn Smeets

“label”元素通常用于聚焦一个元素，通常是“input”...除了我不知道的其他用途，或者为什么要聚焦“label”？ - André Leria

Answer 1

根据W3C验证器，它无效。

标签元素的“for”属性必须引用一个表单控件。

- federico-t

---

谢谢。但是我可以不使用for属性吗？像这样First Name: praveen。我可以像这样使用label: label(id='firstname')吗？这样我就可以在JS中使用id更新值了。这仍然无效吗？ - Praveen

如果您在没有使用for属性的情况下使用它，例如<label>名字：<label id="firstname"></label></label>，则会收到此错误“标签元素不得出现为标签元素的后代”。您仍然可以使用它，但不要指望它是有效的HTML。它仍然可以在大多数浏览器中正常工作（除了那些面向辅助功能的浏览器）。 - federico-t

Answer 2

不。标签元素主要用于标记控件（如<input>、<button>等），而不是任意元素。请参阅HTML规范：一些元素，不是所有与表单相关的元素都被归类为可标记元素。这些是可以与元素关联的元素：button、input（如果type属性不是hidden状态）、keygen、meter、output、progress、select、textarea。

- Quentin

---

我想要像这样的格式 名字: praveen，我能否使用 label: label(id='firstname') 这样的格式呢？这样我就可以在JS中通过id更新值了。 - Praveen

您可以使用 span 元素代替。就“使用 JS 更新”而言，标签并没有什么特别之处。 - Quentin

谢谢你，我选择使用“span”。 - Praveen

@Quentin 您提出的跨度建议，让我避免了很多失分！谢谢！ - Honinbo Shusaku

Answer 3

正如其他人已经回答的那样，label元素必须引用控件（例如input），因此它不能引用另一个label元素，即使在HTML5中也存在这种限制。

这意味着如果您使用除控件以外的元素读取用户输入，则仍然可以为它们使用标签，但是您不能使用label标记来标记标签。通常，像姓名这样的文本数据最好使用input type=text进行阅读。如果由于某些原因无法使用它或其他控件，则ARIA规范推荐的方法是使用语义中立的元素，通常是span，并使用ARIA属性aria-labelledby来指定标签和span之间的连接。例如：

<span id=firstnameLabel>First Name:</span>
<span role=textbox id=firstname aria-labelledby=firstnameLabel></span>

ARIA属性主要是为辅助或其他具有无障碍意识的软件而设计的。它们可能会被主流浏览器忽略。

- Jukka K. Korpela

---

+1 很好的解释。感谢您建议使用 span 和 aria 属性。 - Praveen

我的答案的第一个版本在代码示例中使用了 aria-describedby，现已更正为 aria-labelledby（与文本中一致）。aria-labelledby 对应于控件和其 label 之间的关系，这是必不可少的。aria-describedby 属性可以用于 附加 引用更详细的说明。 - Jukka K. Korpela

Answer 4

标签名称不符合规范。你可能想使用 HTML5的output元素？

- Ilya Streltsyn

Answer 5

标签的 “for” 属性必须指向一个有效的“控件”元素的 ID 属性，http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2 列出了有效的控件元素，如按钮、复选框、单选按钮、菜单、文件选择、隐藏控件、对象控件。

在 JS 中可能会起作用，但这将是无效的 HTML。

- maniacalrobot