表单字段必须有显式label并正确绑定，placeholder不能替代label，校验反馈需即时具体，提交按钮状态须实时同步且兼顾无障碍。
表单字段必须有 label 且正确绑定
没有 label 或 label 未通过 for / id 关联，会导致屏幕阅读器无法识别、点击区域过小、移动端误触率升高。浏览器原生校验提示（如 required 报错）也可能不显示对应字段名。
正确做法是：每个 input、select、textarea 都配一个显式 label，用 for 指向控件的 id；或直接把控件嵌在 label 内（此时无需 id/for）：
<label for="email">邮箱地址</label> <input type="email" id="email" name="email"> <label>订阅通知 <input type="checkbox" name="notify"> </label>
placeholder 不能替代 label，且要慎用
placeholder 文字在输入开始后即消失，用户失去上下文；在 Safari 和部分旧版 Android 浏览器中，placeholder 还可能被误读为已填值而跳过校验。
建议只用于补充说明（如格式示例），且配合 aria-label 或视觉 label 使用：
立即学习“前端免费学习笔记（深入）”；
- ✅ 可以：
placeholder="例如：name@example.com" - ❌ 不要：
placeholder="邮箱地址"（这应是label的内容） - ⚠️ 注意：
placeholder不触发:placeholder-shown伪类时的样式回退，需测试 iOS Safari 表现
校验反馈要即时、具体、可操作
提交后才报错“请检查表单”，等于让用户重走一遍流程。用户需要知道哪一栏错了、为什么错、怎么改。
实操要点：
- 使用
input原生属性（required、type="email"、minlength）触发即时校验，但别依赖它全覆盖 - 监听
input和blur事件做自定义校验，错误时在对应字段旁插入<span class="error">密码至少8位</span> - 避免仅靠颜色区分错误（色弱用户不可见），加图标或文字强调
- 校验失败时，
focus()到第一个错误字段，但不要打断用户正在输入的字段
提交按钮状态必须反映真实流程
点击后按钮仍可点、没文字变化、没禁用，会引发重复提交；而过早禁用又可能让用户误以为卡死。
关键控制逻辑：
- 点击瞬间立即
button.disabled = true，并把文案改为"提交中..."或加上加载图标 - 成功后跳转或显示成功提示，再恢复按钮（或隐藏）
- 失败时还原按钮、清除加载态，并在表单顶部或字段旁显示明确错误（如
"服务器忙，请稍后再试"） - 禁用状态务必用
aria-busy="true"和aria-live="polite"区域配合，保障读屏体验
label 绑定是否真生效、invalid 状态有没有被 CSS 正确捕获、以及提交按钮在各种网络延迟下的行为一致性。 
