label内禁止嵌套label，且仅能包含input、textarea、select、button等原生可聚焦控件；嵌套或混入span等元素会破坏语义、焦点行为及辅助技术支持。
label里不能嵌套另一个label
HTML规范明确禁止在<label></label>内部再写一个<label></label>。浏览器虽可能自动修复（比如把内层<label></label>移出），但会导致语义断裂、焦点行为异常，SSR 渲染时甚至直接失败。
常见错误写法：<label>用户名<label><input name="user"></label></label>
- 辅助技术（如屏幕阅读器）会忽略嵌套的
<label></label>，无法正确播报关联文字 - 点击外层
<label></label>文本时，焦点可能落在错误控件上，或完全无响应 - 某些 CSS 重置库或 UI 框架的样式规则会意外放大该问题（例如对
label label选择器做了全局覆盖）
label内只能放可聚焦的原生表单控件
<label></label>的隐式关联机制只对原生可聚焦元素生效：即<input>、<textarea></textarea>、<select></select>、<button></button>。其他内容（哪怕只是<span></span>或<div>）一旦混入，就会破坏语义连接。
<p>典型错误：<code><label>邮箱<input type="email"><span class="hint">请输入公司邮箱</span></label>
- 部分旧版 Safari 和 IE 会拒绝为该
<input>建立隐式关联，点击文字不聚焦 - 若
<span></span>含交互逻辑（如 tooltip 触发），键盘 Tab 流会卡顿或跳过控件 - WCAG 检查工具会报“
<label></label>包含非可聚焦内容”，影响无障碍审计
radio/checkbox组不能用单个label包裹全部选项
一组<input type="radio">必须每个选项单独配<label></label>，共用name但各自有唯一id和for。用一个<label></label>包住整组，只会让第一个<input>响应点击，其余失效。
错误结构：<label>性别<input type="radio" name="gender" value="m">男<input type="radio" name="gender" value="f">女</label>
- 屏幕阅读器读不出“当前选中的是‘男’还是‘女’”，只识别第一个 radio 的状态
- 用户点击“女”文字时，焦点不会落到对应控件，也无法触发切换
- 如果用嵌套写法替代
for/id，该场景根本不可行——嵌套只适用于单个控件
嵌套时name属性不能省略
即使把<input>直接写进<label></label>，也必须保留name属性，否则表单提交时该字段值不会被发送。
反例：<label>密码<input type="password"></label> → 提交后password字段为空
-
name决定表单数据键名，和id或for无关；嵌套不改变这一规则 - 动态渲染时，若用模板引擎生成，容易漏掉
name（尤其当id被自动生成而name靠手动补） - React/Vue 等框架中，若用受控组件，
name还关系到FormData解析和后端字段映射
