label 的 for 属性必须与 input 的 id 逐字一致（含大小写、符号），否则点击无效、Tab 跳过、屏幕阅读器无法识别；动态生成需同步；禁用重复 id；嵌套 label 内不可含其他可聚焦元素。
label for 必须严格匹配 input id
点击文字没反应、Tab 键跳过、屏幕阅读器读不出提示——八成是 for 和 id 对不上。不是“差不多就行”，而是逐字一致：大小写、连字符、下划线、空格，一个都不能错。
- 动态渲染表格时，
id="email-1"和for="email-1"要同步生成，别漏掉行号或拼错前缀 - 绝对不要用
class或name代替id；重复id会导致for总指向第一个元素 - 嵌套写法
<label><input>启用</label>可行，但内部不能有其他可聚焦元素（比如按钮或链接）
用 aria-labelledby 处理复杂表头场景
当一个输入框的语义需要多个元素共同描述（比如 <th id="price">价格</th> + <td>(元)</td>），单靠 for 无法覆盖。这时必须用 aria-labelledby 显式串联。
- 写法示例：
<input aria-labelledby="price unit" type="number">，其中unit是另一个id -
aria-labelledby支持空格分隔多个id，顺序即朗读顺序，适合多段辅助说明 - 注意：它不触发点击聚焦，仅增强可访问性；交互仍需配合正常
label或tabindex
hidden 与 disabled 的行为差异要分清
hidden 是视觉隐藏（类似 display: none），而 disabled 是禁用状态，两者语义和实际效果完全不同。
-
hidden元素不参与布局、不可聚焦、不被屏幕阅读器读取，但表单提交时仍会发送其name/value（除非同时加disabled） -
disabled元素保留占位、不可编辑、不可聚焦、不参与表单提交——这才是“真正禁用” - 常见误用：用
hidden替代逻辑卸载，导致 DOM 中残留大量无意义可聚焦节点，拖慢键盘导航
data-* 属性适合存上下文参数，但别传敏感数据
data- 系列属性是前端最常用的自定义数据载体，尤其适合表单中传递行级配置、校验规则或后端字段映射关系。
立即学习“前端免费学习笔记（深入）”；
- 例如：
<input data-field-type="phone" data-required-if="country=CN">，供 JS 动态控制显隐或验证逻辑 - 值始终是字符串，JS 里要用
element.dataset.fieldType（驼峰自动转换）读取 - 切记：所有
data-内容都暴露在 DOM 中，绝不能放 token、密钥、用户 ID 等敏感信息
表单里最容易被忽略的，其实是 lang 和 dir 这类看似“无关”的全局属性——它们不改变样式，却直接影响输入法候选词排序、数字书写方向、甚至某些浏览器的自动填充逻辑。真正在多语言环境跑起来，这些细节才开始咬人。
