html 元素 label 为什么要加 for 属性

• #html

label 标签通常与 input 标签一起使用。

1. label 标签包裹 input 标签

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

如下示例：点击 Username 文字，文本框也会获得焦点，提升用户体验。

Username:

2. label 标签和 input 标签没有包裹关系

需要为 label 标签设置 for 属性，for 属性的值为 input 标签的 id 属性值，这样做二者才会关联。

<label for="username">Username: </label>
<input id="username" type="text" />

如下示例：设置了 for 属性的点击文字，仍然可以使文本框获得焦点；未设置 for 属性的点击文字，文本框不会获得焦点。

Username(有设置 for 属性):
Username(未设置 for 属性):

↶ 返回首页