在网页表单开发中，提升用户操作体验是核心目标之一。很多常见的表单场景里，输入框旁边会有对应的文字说明，比如“用户名”“密码”这类提示文本，默认情况下只有点击输入框本身才能触发聚焦，点击旁边的文字没有任何反应。而通过HTML的<LABEL>标签搭配FOR属性，就能快速实现点击文字直接聚焦对应输入框的效果，整个过程不需要任何JavaScript代码，简单且高效。
LABEL标签与FOR属性的基本关系
LABEL标签是HTML中用于定义表单控件关联标签的原生元素，它的核心作用是将一段文本和某个表单控件绑定起来，绑定后点击这段文本就会触发对应表单控件的默认行为，比如输入框聚焦、单选框选中、复选框切换状态等。
FOR属性是LABEL标签的关键属性，它的值需要和对应表单控件的ID属性值完全一致，这样浏览器才能建立两者的关联关系。需要注意的是，FOR属性的值必须和控件的ID值严格匹配，大小写不同也会导致绑定失败。
具体实现步骤与代码示例
实现点击文字聚焦输入框只需要三步：
- 给目标输入框设置一个唯一的ID属性
- 编写对应的提示文字，用<LABEL>标签包裹
- 给LABEL标签设置FOR属性，值为输入框的ID值
下面是一个完整的示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LABEL标签FOR属性示例</title>
<style>
.form-group {
margin: 15px 0;
}
label {
margin-right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>用户登录表单</h3>
<div class="form-group">
<!-- FOR属性值为user-name，和输入框ID对应 -->
<label for="user-name">用户名：</label>
<!-- 输入框ID为user-name -->
<input type="text" id="user-name" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="user-pwd">密码：</label>
<input type="password" id="user-pwd" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="remember">记住登录状态</label>
<input type="checkbox" id="remember">
</div>
</body>
</html>在上面的代码中，点击“用户名：”“密码：”“记住登录状态”这些文字，对应的输入框或者复选框就会自动获得焦点或者切换状态，不需要用户精准点击控件本身。
嵌套方式的替代方案
除了使用FOR属性关联，还可以把表单控件直接放在LABEL标签内部，这种情况下不需要设置FOR和ID，浏览器会自动将LABEL内的控件和文本绑定：
<label>
手机号：
<input type="tel" placeholder="请输入手机号">
</label>这种方式更简洁，但缺点是如果LABEL内部有多个表单控件，可能会出现关联混乱的问题，所以复杂场景下还是推荐使用FOR+ID的显式关联方式。
注意事项与扩展价值
使用LABEL标签的FOR属性时需要注意几个问题：
- 同一个ID在同一个页面中只能出现一次，否则FOR属性只会关联到第一个匹配ID的控件
- FOR属性只能关联页面内存在的表单控件，如果ID对应的控件不存在，绑定会失效
- 如果LABEL标签内部已经包含了表单控件，再设置FOR属性可能会覆盖嵌套的关联关系，不建议混合使用两种方式
除了提升操作体验，这种用法还有无障碍访问的价值。屏幕阅读器会读取LABEL标签的内容作为对应表单控件的说明，视障用户使用辅助工具时就能明确知道每个输入框的作用，符合WCAG无障碍规范的要求。