邮箱输入框必须用type="email"并设required和autocomplete="email"，找回密码页改用autocomplete="one-time-code"或"off"，label须for绑定input，name属性不可缺失且与后端一致。
邮箱输入框必须用 type="email" 而不是 type="text"
浏览器原生校验能拦截明显非法格式（如无 @ 符号、缺少域名），减少后端无效请求。但注意：type="email" 不校验邮箱是否真实存在，也不阻止用户填 test@test 这类语法合法但无效的地址。
实操建议：
- 始终设置
required属性，避免空提交 - 加上
autocomplete="email"，提升移动端和密码管理器识别率 - 不要依赖前端校验做安全兜底——后端仍需完整验证邮箱格式与域名有效性
必须显式声明 autocomplete="one-time-code" 或禁用自动填充
现代浏览器在找回密码流程中可能自动填入已保存的登录邮箱，导致用户误操作或泄露目标账户信息。Chrome 会优先匹配 autocomplete 值而非 name 或 id，所以不能只靠改 name="recovery_email" 来绕过。
实操建议：
- 对找回密码页的邮箱输入框，用
autocomplete="one-time-code"（语义最接近）或autocomplete="off"（兼容性更好） - 避免使用
autocomplete="username"或autocomplete="email"—— 这会主动触发密码管理器填充主账号邮箱 - 某些旧版 Safari 会忽略
autocomplete="off"，可额外加autocapitalize="none" autocorrect="off"辅助压制
label 和 input 必须正确绑定，否则屏幕阅读器无法读出用途
无障碍访问不是可选项。如果 label 没关联 input，视障用户无法得知这个框是“输邮箱找密码”还是“输新密码”，容易反复提交错误内容。
实操建议：
- 用
for属性绑定id：<label for="recovery-email">请输入注册邮箱</label><input id="recovery-email" type="email" ...> - 不要仅靠视觉位置隐含关系（比如 label 紧挨着 input 却没绑定）
- 避免包裹式写法
<label>...<input></label>，部分旧版辅助技术支持不稳定
不加 name 属性或设为空字符串会导致表单提交失败
后端接收不到字段，返回 400 或静默忽略。常见错误是只关注样式和交互，忘了表单数据靠 name 键名传输。
实操建议：
-
name必须有值，且与后端接口文档一致（如后端期待email字段，就写name="email"） - 避免用 JS 动态删掉
name来“禁用提交”——应改用disabled或服务端校验 - 若页面含多个表单，确保各
input的name不重复，否则可能覆盖提交值
autocomplete 行为差异和 name 缺失——前者让测试环境看着正常，上线后用户频繁输错邮箱；后者让整个找回流程卡在第一步，日志里却查不到任何参数。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
