输入字段可以有两个标签吗？

Question

玛丽有一个小表单，它的字段都被标记了。
每当出现错误时，就会造成混乱。

我为每个输入字段都有一个标签... 这是相当标准的事情。 在验证表单后，我会在表单顶部显示一个有用的小段落，详细说明哪些信息缺失或不正确。

我可以为同一个输入字段设置两个标签吗？一个在表单中，另一个在验证提示文本中？我这样做有什么不合适的原因吗？

- aslum

---

你试过发生了什么吗？如果它能正常工作，我不相信它会对你的表单或页面造成任何损害。而且你还会得到额外的加分，因为用户可以点击验证错误并将焦点放在正确的字段上。 - Felipe Cypriano

我没有尝试过，但我猜应该是可能的。但我不建议使用它，因为标签定义了字段的用途，而错误消息则没有。因此，我不应该使用标签来验证警告。 - Guido Hendriks

这是一个通用的UI设计/可用性问题吗？ - jball

是的。它“能用”……但这样设计有什么不好的原因吗？我猜可能是出于可访问性的考虑，但对于普通用户来说，我觉得能够点击错误消息并跳转到出错字段会更方便……只是我不知道这是否会影响“视力受损读者”之类的人。 - aslum

我正在添加[html]标签，因为您在下面某个答案的评论中暗示这是您感兴趣的上下文。但我仍然不确定您是否正在询问技术或设计问题。 - jball

在某些情况下，将控件和文本放在一个 label 中更容易。您甚至可以省略 for 和 id 属性。规范将其称为隐式关联。 - rybo111

Answer 1

我假设这个问题是关于HTML表单的。根据规范：

LABEL元素可用于向控件添加信息，每个LABEL元素与一个表单控件相关联。

因此，每个表单控件可以由多个标签引用，但每个标签只能引用一个控件。所以，如果对于一个控件有第二个标签是有意义的（并且在您描述的情况下确实有意义），那么请随意添加第二个标签。

- James Sumners

---

这实际上更多是一个关于可用性和易访问性的问题，而不是有关 HTML 的。HTML 是有效的。 - aslum

我们都应该只使用有效的代码，否则未来可能会出现问题，影响其他人或与某些JS库等产生冲突。 - SHernandez

正确答案是Rob的。这个解决方案适用于有视力的用户，但在一些屏幕阅读器中失败了。Aslum，猜测您在Rob提交答案之前接受了jsummers的答案。 - cage rattler

不，这是“一个字段可以有两个标签吗？”的正确答案。规范非常清楚。客户端如何解释取决于他们自己。你提供的链接“aria-describedby”指向了“aria-labeledby”，这是“修复”无法正常阅读屏幕的方式。 - James Sumners

有趣的 MDN 说：“一个输入可以与多个标签相关联。” https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label - 2540625

如果在一个输入框中使用多个标签，我相信您将无法通过WCAG合规性测试。Lighthouse会标记具有多个标签的表单元素。更多信息请参见：https://web.dev/form-field-multiple-labels/ - James Moberg

Answer 2

这段HTML代码是合法的且可用（单击标签中的任何一个将转移到相关字段）。

出于辅助功能方面的考虑，正确地实现这一点有些棘手。

这不是一种“常见”的方法，因此至少有一个常见的屏幕阅读器（我用NVDA测试了）只会在您将焦点移动到该字段时读取第一个标签-它会忽略同一字段的任何其他标签。

因此，如果您的错误消息位于页面顶部，则盲人或低视力用户通过字段进行制表将仅听到与之相关的错误消息，而不是旁边的“真实”标签。

因此-如果您正确地构造错误消息，那可能是件好事（肯定比仅以红色突出非验证字段要好！）。

- Rob Whelan

---

这是正确的，正确的编码方式是通过aria-describedby属性来实现。 - cage rattler

Answer 3

是的，你可以让多个标签指向同一个表单控件。这是完全合法的：

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

这只是一个示例...通常你会把这些行包装在一个标签内，因为它们很接近。

- Gert Grenander

---

感谢提供文档链接，其中明确说明"通过使用 for 属性创建多个引用，可以将一个控件与多个 LABEL 关联。"请给我点赞（+1）。 - alexg