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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2829936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:05:08  来源:igfitidea点击:

Can an input field have two labels?

htmlformslabels

提问by aslum

Mary had a little form, and its fields where labeled just so.
Whenever an error crept in, confusion it would sow.

玛丽有一个小表格,它的领域被标记为如此。
每当出现错误时,就会播下混乱。

I've got a label for each input field... pretty standard affair. After validating the form, I'm displaying a helpful little paragraph at the top of the form detailing what information is missing or incorrect.

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

Can I have two labels for the same input field? One in the form proper, and one in the validation reminder text? Is there any reason I shouldn't do this?

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

回答by James Sumners

I assume this question is about HTML forms. From the specification:

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

The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.

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

Thus, each form control can be referenced by multiple labels, but each label can only reference one control. So if it makes sense to have a second label for a control (and in the situation you describe, it does) feel free to add a second label.

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

回答by Rob Whelan

The HTML is legal, and it works (clicking on any of the labels will transfer focus to the field in question).

HTML 是合法的,并且有效(单击任何标签会将焦点转移到相关字段)。

It's a little trickier to do right for accessibility reasons.

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

It's not a "common" approach, and because of that at least one common screen reader (I tested with NVDA) only reads the first label when you shift focus into the field -- it ignores any additional labels for the same field.

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

So if your error message is at the top of the page, a blind or low-vision user tabbing through the fields will hear just the error message when landing on the field in question, not the "real" label next to it.

因此,如果您的错误消息位于页面顶部,盲人或视力不佳的用户在登陆相关字段时只会听到错误消息,而不是旁边的“真实”标签。

Hence -- if you phrase the error message properly, that might be a good thing (certainly better than just highlight the non-validating field in red!).

因此——如果你正确地表达错误信息,那可能是一件好事(当然比只用红色突出显示非验证字段更好!)。

回答by Gert Grenander

Yes, you can have multiple labels point at the same form control. This is 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">

This is just an example... normally you would wrap these lines with one label since they're close.

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