label的for属性必须与input的id字节级完全一致，否则点击无效、屏幕阅读器无法识别、键盘无法聚焦；id须全局唯一且动态渲染时保持一致，禁用name/class替代，radio/checkbox每项须独立绑定。
label 必须配 id，否则点击无效、读屏失声、键盘聚焦失效——这不是“体验差”，是直接不可用。
为什么 label 的 for 属性不能省略或乱写
浏览器和屏幕阅读器靠 for 和 id 字节级完全相等来建立语义连接。任何偏差都会导致绑定断裂：
-
for="email"对应id="email"✅；id="user-email"或id="Email"❌ - 服务端渲染或循环生成时，若没动态拼接唯一
id（如id="phone-{{uid}}"），所有 label 都会聚焦到第一个控件 - 别用
name、class或placeholder替代id——for只认id
快速验证：控制台执行 document.getElementById("xxx")，看是否返回目标 input；再查 document.querySelectorAll('[id="email"]').length，结果大于 1 就说明重复了。
fieldset 和 legend 不是装饰，是语义分组刚需
用一堆 div 加 CSS 边框“假装分组”，对屏幕阅读器无效，也破坏可访问性树。真正有效的分组必须用 fieldset + legend：
-
legend必须存在且非空，内容要准确概括用途（如“支付方式”“收货地址”） - 每个
fieldset应只包裹一组有明确业务关联的控件；“用户名+邮箱+密码”不该和“订阅新闻”混在一起 - 避免嵌套
fieldset，三层以上会显著增加 DOM 深度，拖慢渲染
漏掉 legend 或留空标签，辅助技术会跳过整个区块——不是隐藏，是彻底忽略。
立即学习“前端免费学习笔记（深入）”；
type 和 autocomplete 必须成对填准，否则移动端键盘和自动填充全失效
写一堆 type="text" 看似省事，实则牺牲关键体验：
-
type="email"+autocomplete="email"→ 唤出带 @ 键的键盘，触发浏览器自动填充 -
type="tel"+autocomplete="tel"→ 弹数字键盘，支持运营商识别 - 密码字段必须同时用
type="password"和autocomplete="current-password"（新密码用new-password），否则 Chrome 拒绝保存 - 验证码字段别滥用
autocomplete="off"，改用autocomplete="one-time-code"更合规
错配示例：type="email" 却配 autocomplete="username"，浏览器直接忽略自动填充逻辑。
验证时机选 blur 而非 input，防抖比实时更真实
每敲一个键就校验（input 事件），用户还没输完就报错“@ 缺失”，反而打断输入流：
- 基础规则（必填、邮箱格式、手机号长度）适合在
blur时触发 - 后端校验（如用户名是否已注册）必须加 loading 状态，并禁用提交按钮，防止重复提交
- HTML5 的
required或pattern错误文案不可控、不支持自定义样式，不能单独依赖
真正卡住人的从来不是语法怎么写，而是 id 是否精准、是否在动态上下文中保持唯一、以及是 blur 还是 input ——选错时机，再好的提示也变成干扰。
