label 的 for 属性必须与 input 的 id 严格逐字符匹配，大小写、连字符均不可容错；嵌套写法更简洁但仅适用于单个控件；radio/checkbox 每项需独立 label[for] 绑定唯一 id；submit 按钮可用 form 属性跨容器关联表单。
label for 属性必须严格匹配 input 的 id
点击 label 文字没反应？大概率是 for 值和目标控件的 id 不一致。它不认 name，不认 class，也不接受大小写容错或连字符模糊匹配。
常见错误现象：
-
<label for="email">邮箱</label><input name="email">→ 缺少id，点击无效 -
<label for="user-email">邮箱</label><input id="email">→ 字符串不等，失效 -
<label for="Username">用户名</label><input id="username">→ 大小写不一致，不绑定
实操建议：
- 每个
<input>、<select>、<textarea>必须有唯一且稳定的id（如id="search-input"，避免用随机数） -
for值必须逐字符复制粘贴自目标控件的id，包括连字符、下划线、大小写 - 用浏览器 DevTools 选中
label，看for值，再全局搜索该字符串是否作为id存在且仅出现一次
嵌套写法比 for 更简洁但有适用边界
把控件直接写进 label 标签里，天然绑定，不用 for 和 id —— 这是最不容易出错的方式，尤其适合简单表单。
立即学习“前端免费学习笔记（深入）”；
但它不是万能的：
- 只支持单个可交互控件：
<input>、<textarea>、<select>、<button>；不能包<div>或自定义组件 - 不能用于一组
radio或多个checkbox：一个label包住整组，只会让第一个控件响应点击 - 若控件会被 JS 动态移动（比如拖拽重排），嵌套结构容易断裂，
label失去语义连接
正确示例：<label>密码：<input type="password" name="pwd"></label>
错误示例：<label>性别：<input type="radio" name="gender" value="m">男 <input type="radio" name="gender" value="f">女</label>
radio/checkbox 每一项都必须独立配 label+for
一组 radio 共享 name，但每个选项必须有自己唯一的 id 和对应的 label[for]，否则屏幕阅读器无法区分“选中男还是女”，键盘 Tab 也无法单独聚焦到某一项。
关键点：
- 每个
<input type="radio">都得带id（如id="gender-m"） - 每个
<label for="gender-m">必须指向对应项的id，不是name - 不要为了省事用一个
label包住全部选项——这会让辅助技术完全丢失单个选项语义
推荐写法：<input type="radio" id="theme-dark" name="theme" value="dark"><label for="theme-dark">深色模式</label>
form 属性可让 submit 按钮跨容器关联表单
当提交按钮不在 <form> 内部时，for 不起作用，但可以用 form 属性强行指定目标表单。
注意条件：
- 按钮必须是
type="submit"，否则form属性被忽略 -
form值必须是目标<form>的id，不是class或name - 一个按钮只能关联一个表单（不支持空格分隔多个
id） - IE10+ 支持，旧版 IE 需降级为
document.getElementById('xxx').submit()
示例：<button type="submit" form="login-form">登录</button><form id="login-form">...</form>
最容易被忽略的是：即使视觉上 label 和控件挨得很近，只要没显式 for/id 匹配或没嵌套，它就不是真正可访问的。可访问性不是“看起来能点”，而是屏幕阅读器能读、键盘 Tab 能跳、JS 获取焦点能对得上——这些全依赖那一组精准的字符串匹配。
