label
标签的 for
属性在 HTML 中用于将标签与特定的表单控件(如 input
、select
、textarea
等)关联起来。通过使用 for
属性,当用户点击 label
标签时,浏览器会自动将焦点转移到与之关联的表单控件上。
使用方法:
- 指定控件的
id
属性:为目标表单控件设置一个唯一的id
。 - 在
label
标签的for
属性中引用该id
:在label
标签的for
属性中设置与表单控件的id
属性相同的值。
示例代码:
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
在上述示例中,当用户点击“用户名”这个 label
标签时,光标会自动聚焦到与其关联的 input
框内。这是因为 label
标签的 for
属性值与 input
元素的 id
属性值相同(都是 “username”)。
注意事项:
- 确保
for
属性的值与表单控件的id
完全匹配。 label
标签也可以包裹表单控件,这样就不需要for
属性。例如:<label>用户名: <input type="text" name="username"></label>
这种方式也能实现点击标签时聚焦到相应控件的效果,但不如使用 for
属性的方法那么灵活