如果目标输入嵌套在标签内,HTML标签中是否需要“for”属性?

时间:2012-01-04 12:21:03

标签: html input label

我注意到当你将input元素放入label元素时,HTML标签标签不需要'for'属性:

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

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

谢谢!

4 个答案:

答案 0 :(得分:18)

W3 HTML 5.2 standardWhatWG Living Standard状态(几乎完全相同,引用来自后者):

  

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

因此可以按照HTML标准的方式使用它。

答案 1 :(得分:18)

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

use_the_label_element_to_make_your_html_forms_accessible

所以你应该使用它。这里有link来说服accessibily的重要性。

这是一个小故事 - 使您的网站可以访问可以使所有用户受益 - 我总是惊讶于公民当局在我有一个女儿和使用推椅之前为轮椅访问所做的努力。我认为网站遵循相同的规则 - 每个人都受益。

道歉的道歉

答案 2 :(得分:6)

您可以在input中添加label,但该labellabel相关联,或者由于某种原因,您必须在for其他地方添加for元素DOM,您可以使用{{1}}属性指定它的含义。尽管如此,使用{{1}}属性永远不会伤害:)

答案 3 :(得分:5)

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

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

此外,您的HTML需要整理一下 - 输入标记需要关闭,它不应该在标签内:

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

或者如果你想要标签在右边:

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