label的for属性必须与单个input的id严格一一匹配，大小写、符号均需一致；嵌套写法更可靠但仅限单控件；复杂场景用aria-labelledby补充，但不触发聚焦。
label for属性必须逐个匹配每个input的id
批量绑定不是靠一个
常见错误现象：<label for="email">邮箱</label><input name="email"> → 缺id，点击无效；<label for="userEmail">邮箱</label><input id="user-email"> → 连字符不一致，失效。
- 每个
<input>、<textarea>、<select>都必须有唯一id（如id="login-username"，避免用随机数或时间戳） -
for值建议从目标id属性中复制粘贴，而非手打 - 用 DevTools 选中
<label>，看for值，再全局搜索该字符串是否作为id存在且仅出现一次
radio/checkbox 组必须为每一项单独写label
一组radio共用name，但每个选项必须有独立id和对应for，否则键盘 Tab 会跳过整个组，屏幕阅读器也无法逐项朗读。
错误写法：<label>性别：<input type="radio" name="gender" value="m">男 <input type="radio" name="gender" value="f">女</label> → 只有第一个input被绑定，第二个点不了文字，Tab 键也进不去。
立即学习“前端免费学习笔记（深入）”；
- 正确结构是每个
input配一个<label for="xxx">，或用嵌套方式：<label><input type="radio" name="gender" id="gender-m" value="m">男</label> - 不要让多个
input共享同一个id，这会导致for指向不可预测的元素 - 若用 JS 动态生成，确保每次渲染都为每个选项生成唯一
id，不能复用模板中的静态id
嵌套写法适合简单表单，但不适用于动态移动或复用场景
把input直接包进<label>里，天然绑定，不用for和id，是最少出错的方式。但它只对单个原生可聚焦控件有效，且语义连接依赖 DOM 位置。
常见问题：<label>搜索<input id="search-input"><button>清空</button></label> → <button>是交互元素，会干扰焦点逻辑，部分读屏器忽略整个label。
- 仅允许包裹一个可聚焦控件：
<input>、<textarea>、<select>、<button>（注意：不是<div>或自定义组件） - 若控件会被 JS 拖拽、重排、或跨容器移动，嵌套结构容易断裂，
label失去语义 - 无法复用同一段文字关联多个控件（例如“必填”提示需同时作用于用户名和邮箱）
复杂布局推荐 aria-labelledby 作为补充方案
当 label 文字分散在多个元素中（比如表格头+单元格说明），或需要复用已有文本时，aria-labelledby是唯一合规解法，但它不替代for/id，也不能触发原生聚焦行为。
示例：<th id="date-label">日期</th><td><input type="text" aria-labelledby="date-label range-hint"></td><span id="range-hint">(起止时间)</span> → 屏幕阅读器会按顺序朗读“日期 起止时间”，但点击这段文字不会让 input 获焦。
-
aria-labelledby值是空格分隔的多个id，顺序即朗读顺序 - 所有引用的
id必须存在、非display: none、非aria-hidden="true" - 不能和
for同时用在一个控件上，优先级以aria-labelledby为准 - 旧版 IE 不支持，且需配合 JS 补充点击聚焦逻辑才能完整模拟
for行为
最容易被忽略的一点：label 的文本内容本身构成控件的“可访问名称”，它会被屏幕阅读器直接朗读。所以别写“点这里”“↓”或大段说明，更不能用placeholder代替——placeholder 输入时就消失，且多数读屏根本不读它。
