我注意到当你将input元素放入label元素时,HTML标签标签不需要'for'属性:
<label><input type="text">Last name</label>
Run Code Online (Sandbox Code Playgroud)
但我想知道什么是最好的做法.任何人都可以帮助我吗?
谢谢!
Web*_*ter 19
无论是W3 HTML 5.2规范和WHATWG生活标准状态(在几乎精确的术语,报价从后者):
可以指定for属性以指示与标题相关联的表单控件.如果指定了该属性,则该属性的值必须是与label元素在同一树中的可标记元素的ID.如果指定了属性并且树中的元素ID等于for属性的值,并且树顺序中的第一个元素是可标记元素,则该元素是标签元素的标记控件.
所以在遵循HTML标准方面可以这样使用它.
Cra*_*ket 19
它用于屏幕阅读器等的可访问性
use_the_label_element_to_make_your_html_forms_accessible
所以你应该使用它.这里有一个链接,可以让您相信accessibily的重要性.
这是一个小故事 - 使您的网站可访问可以使所有用户受益 - 我总是惊讶于公民当局为了轮椅可访问而付出的努力,直到我有一个女儿并使用推椅.我认为网站遵循相同的规则 - 每个人都受益.
为辩论道歉
你可以input在你的内容中包含label它label,或者它与之相关联,或者如果由于某种原因你必须label在DOM的其他地方放置你的元素,你可以用for属性指定它的含义.for尽管如此,使用属性永远不会伤害:)
for属性与文本输入没有太大区别,但对于复选框输入非常有用,因为它允许用户单击标签以及复选框本身:
<label for="chk">Checkbox</label><input type="checkbox" id="chk" />
Run Code Online (Sandbox Code Playgroud)
此外,您的HTML需要整理一下 - 输入标记需要关闭,它不应该在标签内:
<label>Last Name</label><input type="text" />
Run Code Online (Sandbox Code Playgroud)
或者如果你想要标签在右边,那么:
<input type="text" /><label>Last Name</label>
Run Code Online (Sandbox Code Playgroud)