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


134

玛丽有一个小小的形式,它的领域也是如此。
每当出现错误时,就会造成混乱。

我为每个输入字段都有一个标签...非常标准的事情。验证表单后,我将在表单顶部显示一个有用的小段落,详细说明哪些信息丢失或不正确。

同一输入字段可以有两个标签吗?一种形式正确,一种在验证提醒文本中?有什么原因我不应该这样做吗?


您是否尝试过会发生什么?如果有效,我认为不会对您的表格或页面造成任何损坏。而且您将获得加分,因为使用该功能的用户将可以点击验证错误并将焦点放在正确的字段上。
菲利普·塞普里亚诺

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

1
这是一个通用的UI设计/可用性问题吗?
jball 2010年

是的 它“有效” ...但是由于某种原因这是不好的设计吗?我猜这可能是出于可访问性的原因,但是对于普通用户来说,我认为能够单击错误消息并进入混乱的字段将使事情变得更容易...我只是不知道是否会弄乱“视力不佳的读者”之类的东西。
阿什卢姆2010年

1
在某些情况下,将控件和文本放在其中比较容易label。您甚至可以省略forid属性。该规范要求这种隐含的关联。
rybo111 '16

Answers:


158

我认为这个问题与HTML表单有关。从规格

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

因此,每个表单控件可以被多个标签引用,但是每个标签只能引用一个控件。因此,如果有必要为控件添加第二个标签(并且在您所描述的情况下,确实可以)添加第二个标签。


2
实际上,与HTML相比,它实际上更是一个可用性/可访问性问题。的HTML作品。
阿什卢姆2010年

2
我们都应该只使用有效的代码,否则将来可能会发生故障,或者对于其他人或某些JS库或其他任何东西,可能会中断。
SHernandez 2014年

1
正确的答案是罗布的。此解决方案适用于有视力的用户,某些屏幕阅读器无法使用。Aslum,猜测您在Rob提交jsummers的答案之前接受了jsummers的答案。
笼子响尾蛇,2015年

3
@AvramLavinsky不,这是“字段可以有两个标签吗?”的正确答案。规格很清楚。客户如何选择解释取决于他们。您链接到“ aria- describeby”(链接到“ aria-labeledby”)是“修复”损坏的屏幕阅读器的方法。
James Sumners 2015年

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

40

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

出于可访问性的原因,正确进行操作有点棘手。

这不是一种“通用”方法,因此,当您将焦点移到该字段中时,至少有一个普通的屏幕阅读器(我用NVDA测试过)仅读取第一个标签-它会忽略同一字段的任何其他标签。

因此,如果您的错误消息位于页面顶部,则盲目或视力低下的用户在浏览这些字段时,在着陆到该字段时只会听到错误消息,而不会听到旁边的“真实”标签。

因此,如果您正确地指出错误消息,那可能是一件好事(肯定比仅用红色突出显示非验证字段要好!)。


1
这是正确的,正确的编码方式是通过
aria-

27

是的,您可以在同一窗体控件上具有多个标签点。这是完全合法的

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

这只是一个示例...通常,由于这些行是封闭的,因此将它们包装起来并带有一个标签。


13
指向文档的链接+1,其中明确指出“ LABEL可以通过for属性创建多个引用来将多个控件与同一个控件相关联”。
alexg
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.