Html 标签标签中的“for”是什么?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/698001/
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
What's the "for" for in a label tag?
提问by lynn
Just ran across a for
parameter in an HTML label tag:
刚刚for
在 HTML 标签标签中遇到一个参数:
<label for="required-firstname"> First Name </label>
<small>*</small>
<input name="required-firstname" type="text" tabindex="2"
id="required-firstname" size="24" maxlength="40">
I'm converting this form to a PHP processed script, can I get rid of the for= parameters? (And out of curiosity, what does it do?)
我正在将此表单转换为 PHP 处理过的脚本,我可以去掉 for= 参数吗?(出于好奇,它有什么作用?)
回答by Jonas
From w3schools.org:
来自 w3schools.org:
The tag defines a label for an input element.
The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.
The for attribute of the tag should be equal to the id attribute of the related element to bind them together.
该标签定义了一个输入元素的标签。
label 元素不会呈现为用户的任何特殊内容。但是,它为鼠标用户提供了可用性改进,因为如果用户单击标签元素内的文本,它会切换控件。
标签的 for 属性应该等于相关元素的 id 属性将它们绑定在一起。
HTH!
哼!
adding my $.02 as an Accessibility SME - as well as usability, the LABEL also associates the input field with the correct label so persons using screen readers will know what the field is for.
添加我的 $.02 作为辅助功能 SME - 以及可用性,标签还将输入字段与正确的标签相关联,以便使用屏幕阅读器的人知道该字段的用途。
回答by Bill the Lizard
The HTML label tag defines a label for a form element. They're usually used with checkboxes and radio buttons, and when the user clicks on the label it toggles the button. With a text input (and you'll have to check this to be sure) I think it only gives focus to the input when the user clicks the label.
HTML label 标签定义了表单元素的标签。它们通常与复选框和单选按钮一起使用,当用户单击标签时,它会切换按钮。使用文本输入(您必须检查以确保)我认为它只会在用户单击标签时将焦点放在输入上。
回答by Pawel Krakowiak
It specifies to which element that label is bound to. In your sample code the label is there forthe required-firstnameinput field. If the user clicks on that label, the focus will go to the bound input field. It's a usability improvement and I think you'd be better off leaving it as is. It's a good practice.
它指定标签绑定到哪个元素。在您的示例代码的标签是有针对的需要,名字输入字段。如果用户单击该标签,焦点将转到绑定的输入字段。这是一个可用性改进,我认为你最好保持原样。这是一个很好的做法。
回答by user3219915
The "for" attribute is a necessary element for the accessibility of your form. Do not omit it. For someone using a screen reader (SR) to have a web page announced to them, the "for" attribute relates the control to the label. Typically a SR user will tab through a form, from one control (which is a focusable element for the SR) to the next. Without the "for" attribute, the SR user will have to change modes on the SR and probe around the form to try and determine which control matches which label, which can be time-consuming and confusing. The "for" attribute can also be useful for assistive technology relating to motor issues.
“for”属性是表单可访问性的必要元素。不要省略它。对于使用屏幕阅读器 (SR) 向他们宣布网页的人来说,“for”属性将控件与标签相关联。通常,SR 用户将通过 Tab 键浏览表单,从一个控件(SR 的可聚焦元素)到下一个控件。如果没有“for”属性,SR 用户将不得不更改 SR 上的模式并围绕表单进行探测,以尝试确定哪个控件与哪个标签匹配,这可能既耗时又令人困惑。“for”属性对于与运动问题相关的辅助技术也很有用。
WebAIM.org has a great page explaining the accessibility ramifications of "for": http://webaim.org/techniques/forms/controls
WebAIM.org 有一个很棒的页面解释了“for”的可访问性后果:http: //webaim.org/techniques/forms/controls
回答by VirtuosiMedia
It ties the label to a form element id. Some form elements, like checkboxes, can be activated by clicking on their label.
它将标签与表单元素 id 联系起来。某些表单元素,例如复选框,可以通过单击其标签来激活。
回答by Peter Turner
In some browsers when you click on a text in a for tag, you'll check the box it's associated with (i.e. the for = id) or put the focus on that box. It's an ADA thing
在某些浏览器中,当您单击 for 标记中的文本时,您将选中与其关联的框(即 for = id)或将焦点放在该框上。这是 ADA 的事情