HTML表单交互需JavaScript驱动，实时校验用input事件+防抖，change仅作兜底；禁用按钮须disabled+视觉反馈；用setCustomValidity/reportValidity统一错误提示；autofill需监听动画并补发事件；细节需兼顾可访问性与健壮性。
HTML 表单本身没有交互逻辑，所有“体验提升”都依赖 JavaScript 控制 + 语义化 HTML 配合 CSS 响应，别指望只写 <form> 就能有实时校验、防重复提交或输入反馈。
用 addEventListener('input') 替代 onchange 做实时验证
用户还在打字时就该提示错误，而不是等失焦才触发——onchange 只在 blur 或回车后才触发，对密码强度、邮箱格式这类场景明显滞后。
-
input事件在每次输入（包括粘贴、删除、自动填充）时都触发，适合做即时反馈 - 注意避免高频触发导致卡顿：对
input加setTimeout防抖，延迟 300ms 再执行校验 -
change事件仍保留在提交前做最终兜底校验，防止绕过 JS 的恶意操作
禁用提交按钮时必须同时设 disabled 和视觉反馈
仅用 button.disabled = true 不够：用户可能没注意到按钮变灰，或误以为页面卡死；更糟的是，若 CSS 未重置 :disabled 样式，按钮看起来毫无变化。
- 提交瞬间立即设置
button.disabled = true，并添加class="is-submitting" - CSS 中定义
.is-submitting::after { content: "…"; }或替换为 loading SVG - 成功/失败后恢复按钮状态，且必须重置
disabled属性，不能只删 class
用 setCustomValidity() 配合 reportValidity() 统一错误展示逻辑
手动写 DOM 插入错误提示容易错位、遗漏、与原生校验冲突；浏览器原生的 setCustomValidity() 能让 reportValidity() 自动触发统一气泡提示，且兼容屏幕阅读器。
立即学习“前端免费学习笔记（深入）”；
- 对
<input type="email">这类原生校验字段，先调input.setCustomValidity("")清空旧错误，再根据业务规则设新错误信息 - 表单提交前调
form.reportValidity()，它会触发所有字段的校验，并返回布尔值 - 不要在
submit事件里用preventDefault()后自行弹 alert——破坏可访问性，也绕过浏览器默认聚焦首个错误字段的行为
处理自动填充（autofill）带来的样式与事件错位
Chrome / Safari 在 autofill 后常不触发 input 或 change，导致实时校验失效，且 autofill 样式（如黄色背景）干扰 UI 一致性。
- 监听
animationstart事件捕获 autofill（Chrome 触发webkit-autofill动画） - CSS 中用
input:-webkit-autofill { background-color: transparent !important; }覆盖默认色 - autofill 后主动调用一次
input.dispatchEvent(new Event('input', { bubbles: true }))补发事件
真正难的不是加功能，而是让每个交互节点都经得起 tab 键导航、屏幕阅读器朗读、弱网重试、自动填充、以及用户突然切走又切回来——这些细节不写进代码注释里，下次维护时大概率被删掉。
