label 的 for 属性必须严格匹配 input 的 id，大小写、连字符、下划线均需完全一致；嵌套写法可避免此问题但仅适用于单个原生控件，radio/checkbox 必须为每项单独设置唯一 id 和对应 for。
label 的 for 属性必须严格匹配 input 的 id
点击 label 文字没反应？90% 是 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></select>、<textarea></textarea>必须有唯一且稳定的id（如id="search-input"，避免用随机数） -
for值必须逐字符复制粘贴自目标控件的id，包括连字符、下划线、大小写 - 用浏览器 DevTools 选中
<label></label>，看for值，再全局搜索该字符串是否作为id存在且仅出现一次
嵌套写法更简洁但只适用于单个原生控件
把控件直接写进 <label></label> 标签里，天然绑定，不用 for 和 id——这是最不容易出错的方式，尤其适合简单表单。
但它不是万能的：
- 只支持单个可交互控件：
<input>、<textarea></textarea>、<select></select>、<button></button>；不能包<div> 或自定义组件 <li>不能用于一组 <code>radio或多个checkbox：一个<label></label>包住整组，只会让第一个控件响应点击 - 若控件会被 JS 动态移动（比如拖拽重排），嵌套结构容易断裂，
<label></label>失去语义连接 - 每个
<input type="radio">都得带id（如id="gender-m"） - 每个
<label for="gender-m"></label>必须指向对应项的id，不是name - 共用说明文字（如“请选择性别”）应放在
<fieldset><legend></legend></fieldset>里，而非包裹全部选项的<label></label>中 - 用唯一标识拼接
id，例如id="user-email-123"、for="user-email-123" - 模板引擎（如 EJS、Jinja）中确保循环变量参与生成
id - React/Vue 等框架中，避免在 map 中用索引作
key生成id（删除/重排后易复用旧 id）
正确示例：<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="xxx"></label>，否则屏幕阅读器无法区分“选中男还是女”，键盘 Tab 也无法单独聚焦到某一项。
关键点：
动态渲染时 id 必须唯一且稳定
列表循环渲染多个表单项时，用固定字符串当 id（如 id="email"），会导致所有 <label for="email"></label> 都绑到 DOM 中第一个 <input id="email"> 上，行为不可预测。
解决方法：
真正难的不是写对一次，而是让每次生成的 id 在整个页面生命周期里都唯一、稳定、可预测——尤其当表单被多次挂载/卸载时，残留的重复 id 会悄悄破坏可访问性。
