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

Posted 2023-03-05

【中文标题】输入字段可以有两个标签吗？

【英文标题】：Can an input field have two labels?

【发布时间】：2011-02-19 06:31:21

【问题描述】：

Mary 有一个小表格，它的字段就是这样标记的。 每当出现错误时，就会产生混乱。

我为每个输入字段都有一个标签……非常标准的事情。 验证表单后，我会在表单顶部显示一个有用的小段落，详细说明缺少或不正确的信息。

我可以为同一个输入字段设置两个标签吗？一个在正确的表单中，一个在验证提醒文本中？有什么理由我不应该这样做吗？

【问题讨论】：

你试过会发生什么吗？如果它有效，我认为它不会对您的表单或页面造成任何损害。而且你会得到一个加分，因为用户将能够点击验证错误并将焦点放在正确的字段上。

我没试过，但我想应该可以。但我不建议使用它，因为标签定义了该字段的用途，而错误消息则没有。所以我不应该使用标签来验证警告。

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

是的。它“有效”......但有什么理由这是糟糕的设计吗？我猜这可能是出于可访问性的原因，但对于普通用户来说，我认为能够单击错误消息并被带到混乱的字段会使事情变得更容易......我只是不知道它是否会搞砸“视障读者”之类的东西。

在某些情况下，将控件和文本放在一个 label 中会更容易。您甚至可以省略 for 和 id 属性。 specification 调用此隐式关联。

【参考方案1】：

我假设这个问题是关于 html 表单的。来自specification：

LABEL 元素可用于将信息附加到控件。每个 LABEL 元素只与一个表单控件相关联。

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

【讨论】：

这实际上更像是一个可用性/可访问性问题，而不是 HTML。 html 有效。

我们都应该只使用有效的代码，否则将来可能会出现问题，或者为其他人或某些 JS 库或其他东西。

正确答案是 Rob 的。此解决方案适用于视力正常的用户，但在某些屏幕阅读器中失败。 Aslum，猜测您在 Rob 提交答案之前接受了上述 jsummers 的答案。

@AvramLavinsky 不，这是“一个字段可以有两个标签吗？”的正确答案。规范很清楚。客户如何选择解释这取决于他们。您指向“aria- describeby”的链接，即指向“aria-labeledby”的链接，是“修复”损坏的屏幕阅读器的方法。

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

【参考方案2】：

HTML 是合法的，并且可以正常工作（单击任何标签都会将焦点转移到相关字段）。

出于可访问性的原因，做正确的事情有点棘手。

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

因此，如果您的错误消息位于页面顶部，则盲人或视力不佳的用户在这些字段中切换时只会听到错误消息，而不是旁边的“真实”标签.

因此——如果你正确地表达错误信息，那可能是一件好事（肯定比只用红色突出显示非验证字段更好！）。

【讨论】：

这是正确的，正确的编码方式是通过aria-describedby attribute

【参考方案3】：

是的，您可以将多个标签指向同一个表单控件。这是perfectly legal：

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

这只是一个例子......通常你会用一个标签包裹这些行，因为它们很接近。

【讨论】：

+1 用于指向文档的链接，其中明确指出“通过for 属性创建多个引用，可以将多个LABEL 与同一控件相关联。”