将标签标签包装在表单项上还是在HTML中使用“for”属性更好?

我知道你可以同时使用,但使用一个更好? 如果是这样,为什么?

“for”属性的例子:

<input type="text" id="male"><label for="male">Male</label> 

换行示例:

 <label>Age:<input type="text"></label> 

在语义上,两种可能性都是一样的。 但是,根据你想要的布局,这两种可能性有其优点和缺点。 例如,如果您希望标签位于完全不同的位置,则将input放入标签是没有任何意义的。 但是如果你希望能够通过css做一个hover效果,例如为标签和input周围的区域设置背景,最好把input放到标签中。

根据http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H44.html

一些辅助技术不能正确处理隐式标签

所以当你换行的时候,你可能也想为标签元素提供“for”属性。

wrap允许删除for属性,这又可以忽略input元素上的`id'属性。 非常适合需要在页面上的多个实例中使用的模板或任何表单。

没关系。 两者在定义标签和字段之间的关系方面完成了相同的事情。

将inputembedded到标签中也会影响包装行为。 <label><checkbox/>Value with spaces</label>默认情况下, <label><checkbox/>Value with spaces</label>将作为单个单元进行换行。 <checkbox id="check"/><label for="check">Value with spaces</label>会将空格中的文本换行,并将标签换行,但将上面的checkbox保留。

如果它计算任何东西,像ASP.NET这样的框架将label元素放在input / select / textarea元素旁边,并使用labelfor属性。