将标签标签包裹在表单项周围还是在 HTML 中使用“for”属性更好？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11992026/
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
Is it better to wrap the label tag around a form item or use the "for" attribute in HTML?
提问by James Gardiner
I know that you can use both but is it better to use one over the other? If so, why?
我知道您可以同时使用两者，但使用一个比另一个更好吗？如果是这样，为什么？
Example of "for" attribute:
“for”属性示例：
<input type="text" id="male"><label for="male">Male</label>
Example of wrap:
包装示例：
<label>Age:<input type="text"></label>
采纳答案by matthias.p
Semantically, both possibilities are the same. But depending on what layout you want, there are advantages and disadvantages for the two possibilites. For example, if you want that the label is at an entirely different place, it would not make any sense to put the input into the label. But if you want to be able to make a hover-effect via css, that sets e. g. a background for both the label and the area around the input, it would be better to put the input into the label.
从语义上讲，这两种可能性是相同的。但是根据您想要的布局，这两种可能性各有利弊。例如，如果您希望标签位于完全不同的位置，那么将输入放入标签是没有任何意义的。但是，如果您希望能够通过 css 制作悬停效果，例如为标签和输入周围的区域设置背景，最好将输入放入标签中。
回答by raycohen
according to http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H44.html
根据 http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H44.html
some assistive technologies do not correctly handle implicit labels
一些辅助技术不能正确处理隐式标签
So when you wrap, you may also want to provide the "for" attribute to the label element.
因此，当您换行时，您可能还想为 label 元素提供“for”属性。
回答by frequent
The wrap allows to drop the forattribute, which in turn allows to omit the `id' attribute on the input element. Great for templates or any forms that need to be used in multiple instances on a page.
wrap 允许删除for属性，这反过来又允许省略 input 元素上的 `id' 属性。非常适合需要在页面上的多个实例中使用的模板或任何表单。
回答by DA.
It doesn't matter. Both accomplish the same things in terms of defining the relationship between the label and field.
没关系。在定义标签和字段之间的关系方面，两者都完成了相同的事情。
回答by Adam
Embedding the input in the label also affects the wrapping behaviour. <label><checkbox/>Value with spaces</label>will wrap as a single unit by default. Whereas <checkbox id="check"/><label for="check">Value with spaces</label>will wrap the text with breaks at spaces and will wrap the label to a new line but leave the checkbox above.
在标签中嵌入输入也会影响包装行为。 <label><checkbox/>Value with spaces</label>默认情况下将包装为一个单元。而<checkbox id="check"/><label for="check">Value with spaces</label>将在空格处用中断换行文本并将标签换行到新行，但保留上面的复选框。
回答by Tim S. Van Haren
If it counts for anything, frameworks like ASP.NET put the labelelement next to the input/select/textareaelements and use the label's forattribute.
如果它算个什么，就像ASP.NET框架把label元素旁边input/ select/textarea元素和使用label的for属性。
回答by Mat Richardson
The 'label for' syntax means the label you have created is intended to be a label for the input with id 'inp'. If you click this label in most browsers the cursor focus will land on the 'inp' input element. It's a nice little way of linking a label with its corresponding form control.
'label for' 语法意味着您创建的标签旨在作为 ID 为 'inp' 的输入的标签。如果您在大多数浏览器中单击此标签，光标焦点将落在“inp”输入元素上。这是将标签与其对应的表单控件链接起来的一种不错的小方法。
I'm not aware of compatibility issues, or any around performance. To me it seems syntactically sound, and as far as I'm aware the CSS spec claims that both are valid.
我不知道兼容性问题，或任何有关性能的问题。对我来说，这在语法上似乎是合理的，据我所知，CSS 规范声称两者都是有效的。
回答by lime
The relationship is more explicitly defined when using the forsyntax, although I believe most browsers implement the same behaviour for both.
使用for语法时更明确地定义了这种关系，尽管我相信大多数浏览器都为两者实现了相同的行为。
A matter of preference, I think. Personally I would use the forsyntax as I think it makes more semantical sense than for the inputelement to be a part of its labelelement.
我认为是偏好问题。就我个人而言，我会使用for语法，因为我认为它比input元素成为其label元素的一部分更具有语义意义。
