如果目标输入嵌套在标签内，HTML 标签中是否需要“for”属性？答案

【问题标题】：Is "for" attribute necessary in HTML label if the target input is nested inside the label?如果目标输入嵌套在标签内，HTML 标签中是否需要“for”属性？
【发布时间】：2012-02-02 08:23:47
【问题描述】：

我注意到，当您将输入元素放入标签元素时，HTML 标签标签不需要“for”属性：

<label><input type="text">Last name</label>

但我想知道最好的做法是什么。有人可以帮我吗？

谢谢！

【问题讨论】：

就像 WebMonster 所说的那样，按照自己的方式去做是很好的。只需在整个代码中保持使用一致即可。
我今天注意到Bootstrap's documentation uses both in the same form。似乎for 属性仅在您不能或不将<input> 放入<label> 本身时才适用，并且任何一种方法都是可以接受的。

标签： html input label

【解决方案1】：

for 属性与文本输入没有太大区别，但对复选框输入非常有用，因为它允许用户单击标签以及复选框本身：

<label for="chk">Checkbox</label><input type="checkbox" id="chk" />

【讨论】：

输入标签可以在标签内。见dev.w3.org/html5/spec-LC/…
谢谢@SarathSMenon - 我已经删除了那个位

【解决方案2】：

W3 HTML 5.2 standard 和 WhatWG Living Standard 状态（几乎准确地说，引用来自后者）：

可以指定for属性来指示与标题关联的表单控件。如果指定了属性，则属性的值必须是与标签元素位于同一树中的可标记元素的 ID。如果指定了属性并且树中有一个元素的 ID 等于 for 属性的值，并且树顺序中的第一个这样的元素是可标记元素，则该元素是标签元素的标记控件。

所以按照 HTML 标准来使用它是可以的。

【讨论】：

【解决方案3】：

它用于屏幕阅读器等的可访问性，即

use_the_label_element_to_make_your_html_forms_accessible

所以你应该使用它。这里有一个link，让您相信可访问性的重要性。

这里有一个小故事 - 让您的网站易于访问可以使所有用户受益 - 在我有一个女儿并使用婴儿车之前，市政当局为轮椅无障碍所做的努力一直让我感到惊讶。我认为网站遵循相同的规则 - 每个人都受益。

为争议道歉

【讨论】：

呃，工作量太大了。首先让您的网站运行起来，然后如果您有空闲时间，请添加所有可访问性的内容。

【解决方案4】：

您可以在您的label 中包含input 并且它与label 相关联，或者如果由于某种原因您必须在DOM 的其他地方拥有您的label 元素，您可以指定它的含义for 属性。不管怎样，使用forattribute 永远不会有坏处:)

【讨论】：