关于 HTML 标签的“For”属性
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3142884/
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
Regarding the HTML Label's "For" Property
提问by user328414
Considering the following 2 lines of code (copied from w3schools.com > "HTML < label > for Attribute"):
考虑以下两行代码(从 w3schools.com 复制>“HTML <标签> for Attribute”):
<label for="male">Male </label>
<input type="radio" name="sex" id="male" />
I am having trouble discovering the exact purpose of the above label's "for" property. As you can see it is currently set to "male" (to match the id of the input control).
我无法发现上述标签的“for”属性的确切用途。如您所见,它当前设置为“male”(以匹配输入控件的 id)。
All I have read so far is that the above code will 'associate' and 'bound' the label with the input control. So my question is, what exactly does this mean?
到目前为止,我所读到的只是上面的代码将“关联”和“绑定”标签与输入控件。所以我的问题是,这到底是什么意思?
What exactly are the results of associating the label to the input control?
Does the label and/or input have new behaviours as a result of this 'association'?
将标签与输入控件相关联的结果究竟是什么?
由于这种“关联”,标签和/或输入是否具有新行为?
回答by ceejayoz
A label
that is associated with a control via for
will be clickable. Clicking it selects the control. Highly useful with radio/checkboxes in particular. It also has accessibility implications for screen readers for the visually impaired.
label
与控件关联的Afor
将是可点击的。单击它选择控件。特别是对收音机/复选框非常有用。它还对视障人士的屏幕阅读器具有可访问性影响。
回答by Sarfraz
When you click on the label(Male), the radio will be checked something not possible if you are not using a label. A label is also useful when developing for small devices such as mobiles.
当您点击标签(Male) 时,如果您没有使用标签,收音机将被检查一些不可能的事情。在为手机等小型设备开发时,标签也很有用。
So, it is useful for:
因此,它适用于:
- accessibility reasons
- smaller devices such as mobiles, etc
- useful in radio buttons and check boxes especially
- 无障碍原因
- 较小的设备,如手机等
- 特别适用于单选按钮和复选框
回答by Alex Larzelere
I believe that linking a label to a form element allows you to assign the label
an access key, which will bring the focus to the form element associated with it.
我相信将标签链接到表单元素允许您分配label
访问键,这会将焦点带到与其关联的表单元素上。
As others have mentioned it also allows you to click on the label
and bring focus to the form element.
正如其他人所提到的,它还允许您单击label
并将焦点放在表单元素上。
The for attribute alllows you to place the label
and the element in semantically different areas of the html, and maintain association. (Like two tables, or two different divs). If you're putting both of them together like in your example, it is also correct to enclose the form element in the label and forgo the for
attribute
for 属性允许您将label
和 元素放置在 html 语义不同的区域,并保持关联。(就像两个表,或两个不同的 div)。如果您像在示例中一样将它们放在一起,则将表单元素包含在标签中并放弃该for
属性也是正确的
回答by fiifiblack
Yes, I believe it acts as a form control or a check mechanism when filling a form on webpage, especially ones with radio buttons or check boxes. By clicking on the label, it points the user directly to an area on the form where the right information should be typed. For example, a "text." Or, in a case where the user must choose from some options, such as true or false, or male or female.
是的,我相信它在填写网页表单时充当表单控件或检查机制,尤其是带有单选按钮或复选框的表单。通过单击标签,它会将用户直接指向表单上应输入正确信息的区域。例如,“文本”。或者,在用户必须从某些选项中进行选择的情况下,例如真或假,或男或女。