HTML label for 属性：点击文字自动聚焦输入框与无障碍写法
表单里点一下提示文字就能让输入框获得焦点，这是 HTML 原生能力，靠 <label> 的 for 属性（或把 input 包进 label）实现，无需一行 JS。做对了不仅体验好，还能显著提升移动端与无障碍可用性。本文讲清语法、隐式与显式绑定差别，以及点击 label 却拿不到焦点的常见原因。
一、显式绑定：for 对应 id
<label for="username">用户名</label>
<input type="text" id="username" name="username">规则很简单：for 的值必须等于目标控件的 id。id 在文档内唯一，若两个字段都叫 email，label 只会指向第一个（这也是最常见的失效原因）。
二、隐式绑定：直接嵌套
<label>
记住我
<input type="checkbox" name="remember">
</label>不需要 id/for，点击整个 label 区域（包括文字与内边距）都会切换 checkbox。适合复选、单选这类“文字+控件”的小目标控件，能明显增大可点击面积。
三、一个 label 只能绑一个控件，但可以绑多种类型
- 可关联的表单元素包括 input、textarea、select、button（多个 input 时只能选一个作为“labeled control”，一般是第一个可承载值的控件）。
- fieldset 用
<legend>，不要用 label。
四、点击 label 无效的原因排查
- id 重复：F12 里用
document.querySelectorAll('[id=xxx]').length数一下，>1 就有问题。模板/组件循环渲染时最容易漏加索引。 - 控件被 disabled：禁用状态不会获得焦点。
- 控件
display:none或visibility:hidden（如美化的单选框）：原生控件隐藏后仍可通过 label 触发，但要确认它还在可访问性树里——正确做法是用opacity:0; position:absolute或appearance:none，而不是彻底不渲染。 - JS 里给 label 绑了
preventDefault：常见于自定义弹窗里为阻止滚动穿透而写的通用处理器，会连带破坏 label 行为。 - 动态插入的控件：确保 for/id 同时存在，SPA 渲染时注意 id 前缀冲突。
五、无障碍价值（不是锦上添花）
屏幕阅读器在聚焦输入框时会朗读其关联 label 文本。没有绑定时，用户会听到“编辑框”而不知道要填什么，这是最典型的可用性缺陷。检查方法：用 Tab 遍历表单，配合系统读屏（Windows 的讲述人、macOS 的 VoiceOver）听一遍。
<label for="pw">密码</label>
<input id="pw" type="password" autocomplete="current-password"
aria-describedby="pwTip">
<p id="pwTip">至少 8 位，含字母与数字</p>补充说明：aria-describedby 用于绑定提示语；autocomplete 提升移动端体验；必填建议同时使用 required 与视觉标记，而不是只写一个星号。
六、样式与布局的实用写法
.field { display: grid; gap: 6px; }
.field > label { font-size: 14px; cursor: pointer; user-select: none; }
.field > input { padding: 8px 10px; border: 1px solid #d3d9e3; border-radius: 6px; }
.field > input:focus-visible { outline: 2px solid #4f7cff; outline-offset: 1px; }给 label 加 cursor:pointer 明确“可点”，加 user-select:none 避免双击时误选中文字（选中文本会让移动端焦点表现变怪）。用 :focus-visible 而不是 :focus，鼠标点击时不会出现突兀描边。
七、常见问题 FAQ
问：能不能让 label 点击时聚焦多个控件？
答：不能，一个 label 只关联一个控件。多控件组合（如年/月/日）建议用 fieldset+legend 或分组容器。
问：label 里放按钮会不会误提交？
答：label 内的 button 被点击时可能触发关联控件（尤其 checkbox 切换），交互复杂时把按钮放到 label 外面，用 JS 主动 input.focus()。
问：只有 placeholder 不写 label 行不行？
答：不行。placeholder 一旦输入就消失，且对比度普遍偏低，不能替代标签；可访问性与可用性都有问题。
总结：能写 label for=id 就不要用 JS 抢焦点——原生实现更短、更稳、天然支持读屏；移动端把复选、单选都嵌套进 label，可点击面积直接翻倍。id 唯一性与 label 上的 preventDefault 是两大失效源，优先查这两处。
生产内容，同时打通搜索引擎（SEO）与AI搜索引擎（GEO）流量入口的软件！ 点击进入365建站器 »
