必须用 for 和 id 显式绑定 label 与表单控件，否则移动端点击失效、屏幕阅读器无法识别、tab 键跳过；大小写、符号需完全一致，id 必须全局唯一且 ssr 与客户端 hydration 保持一致。
必须用 for 和 id 显式绑定，否则移动端点击失效、屏幕阅读器读不出、Tab 键跳过控件——这不是“可选优化”，而是表单能用的底线。
label 点击没反应？先查 for 和 id 是否完全一致
这是最常见也最隐蔽的问题。浏览器对匹配极其严格：大小写、连字符、下划线、空格，差一个字符就断联。
-
for值不带#，写成for="email"，不是for="#email" -
id必须全局唯一；JS 动态生成时若重复赋值（比如循环中都设id="item"），for只会指向第一个 - Vue/React 中 SSR 渲染和客户端 hydration 的
id不一致，会导致首次点击无效（控制台执行document.getElementById("xxx")返回null就是这个原因） - 检查 DevTools 里 label 的
for值和目标input的id是否逐字相同（右键 → “Edit as HTML” 最准）
复选框/单选按钮点击失效？每个选项都要独立 label
一组 radio 共享 name 是对的，但不能只写一个 label 包住全部。每个选项必须有自己专属的 label + id 组合。
- 错误写法：
<label for="gender">性别</label><input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女（只有第一个 radio 能被点中） - 正确写法：每个
input配独立id和对应label，例如<label for="gender-male">男</label><input id="gender-male" type="radio" name="gender" value="male"> - 嵌套方式虽省事（
<label>男<input type="radio" name="gender"></label>），但若 label 内含链接或按钮，语义会混乱，部分读屏器直接跳过
什么时候该用嵌套写法？别为了省两行代码牺牲灵活性
嵌套（<label>文本<input></label>）本质是隐式绑定，适合极简、静态、无复用需求的场景。
- 推荐用在：搜索框右侧带提交按钮的内联结构、开关类 checkbox（如“记住我”）、纯前端 demo
- 禁止用在：需要 CSS 精确控制 label/input 间距或顺序的表单、用
fieldset分组的长表单、label 文字需复用（如表格中同一列提示多次） - 注意：
display: none隐藏 input 会使嵌套关联彻底失效；visibility: hidden或opacity: 0可以保留语义
视觉隐藏 label 但保留语义？用 aria-label 要非常小心
已有可见文字 label 时，再加 aria-label 会覆盖原内容，导致屏幕阅读器重复或错读。
- 有可见文字 → 只用
for/id，不加aria-label - 纯图标按钮（无文字）→ 用
aria-label="搜索"，且确保元素可聚焦（tabindex="0"或本身是button） - 需补充说明（如“邮箱（将用于密码重置）”）→ 用
aria-describedby="hint-id"关联辅助文本，而不是塞进 label 里 -
aria-labelledby适用于 label 文字分散的复杂场景（如表格头 + 单元格旁注），但它不触发原生聚焦，需 JS 补充逻辑才能让点击生效
真正难的不是写对那一行 for="xxx"，而是所有动态生成、框架渲染、多人协作的环节里，id 始终唯一且稳定。一旦漏掉某处，整个表单的可访问性就塌了一角——而这种问题，往往上线后才被视障用户或移动端用户发现。
