将标签标签包装在表单项周围或使用HTML中的"for"属性更好吗？

Question

我知道你可以同时使用它们但是使用一个比另一个更好吗？如果是这样,为什么？

"for"属性的示例:

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

包装示例:

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

Answer 1

从语义上讲,两种可能性都是相同的.但是根据你想要的布局,这两种可能性有利有弊.例如,如果您希望标签位于完全不同的位置,则将输入放入标签中是没有意义的.但是如果您希望能够通过css进行悬停效果,例如设置标签和输入周围区域的背景,那么将输入放入标签会更好.

IMO用于包装带有标签的元素的主要情况是使用媒体查询或CSS来任意地定位标签元素.如果您需要隐藏不同布局的标签,或者出于某种原因将其移动到绝对位置的某个位置,该怎么办？如果它被包装,你不能用CSS做这些事情.查看CSS Zen Garden,了解标准化文档可以单独使用CSS设置样式的多种方式. (2认同)
不要将其拖到地上,但在实际标签周围添加内联标签可以减轻样式问题.考虑`<label for ="name"> <span class ="label">名称</ span> <input type ="text"name ="name"id ="name"/> </ label>` (2认同)
今天有人问了一个问题，证明了语义差异：http://stackoverflow.com/questions/24501497/why-the-onclick-element-will-trigger-twice-for-label-element/24501565?noredirect=1#comment37931213_24501565当您将标签包裹在输入周围时，输入上的事件会冒泡到标签。 (2认同)

Answer 2

一些辅助技术无法正确处理隐式标签

因此,在换行时,您可能还需要为label元素提供"for"属性.

这仍然是这样吗？自写完以来的10年里发生了很多变化. (11认同)
根据这篇 w3 文章（最后更新于 2019 年 7 月），“辅助技术[仍然]更好地支持显式标签”。https://www.w3.org/WAI/tutorials/forms/labels/ (3认同)
谢谢，我正在寻找可访问性/a11y 特定推理/答案，这正是我所需要的。 (2认同)

Answer 3

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