浏览器自动填充需严格遵循WHATWG规范：autocomplete值必须为标准关键词（如email、tel），大小写敏感；type与autocomplete须协同（如type="email"+autocomplete="email"）；label、id、name缺一不可；密码字段需成对标记；表单须先成功提交才能建立映射。
浏览器自动填充不是“写了 autocomplete 就能用”，而是严格按 WHATWG 规范匹配语义；写错一个连字符、大小写或类型不协同，就等于没写——补全建议不出现、钥匙图标不显示、已存信息不唤起。
autocomplete 值必须是标准关键词，不能拼错或自造
浏览器只认 WHATWG 定义的固定 token，比如 email、tel、given-name、current-password。常见错误包括：
-
name无效（Safari 拒绝填充），应拆成given-name+family-name -
firstname、UserEmail、user_email全部被忽略 -
province、zip、mobile不在规范中，得换用address-level1、postal-code、tel - 大小写敏感：
Email≠email，后者才有效
type 和 autocomplete 必须协同，否则补全逻辑失效
浏览器综合 type 和 autocomplete 判断字段意图。单靠其中一个，成功率大幅下降：
-
type="email"+autocomplete="email"✅ 最稳，触发邮箱键盘 + 历史建议 -
type="text"+autocomplete="email"⚠️ 多数浏览器勉强支持，但 Safari 可能跳过 -
type="number"+autocomplete="tel"❌ 键盘强制数字布局，但补全建议消失（类型冲突） -
type="date"是autocomplete="bday"唯一生效前提；type="text"下该值直接被无视 -
type="password"字段若没配autocomplete="current-password"或autocomplete="new-password"，Chrome 可能乱填旧密码
label、id、name 缺一不可，动态渲染要特别小心
浏览器依赖可访问性线索推断字段用途。缺失或错配会导致补全识别率骤降，尤其在 Safari 和旧 Edge 中：
立即学习“前端免费学习笔记（深入）”；
- 每个
<input>必须有唯一id，且对应<label for="xxx">；动态生成时别漏掉同步设置 -
name属性建议保留，和autocomplete配合使用更稳妥，例如<input name="phone" autocomplete="tel"> - React/Vue 中避免条件渲染隐藏整个字段（如
{show && <input>}），浏览器会错过 DOM 初始化时机 - Vue 的
v-model初始值设为空字符串""，某些 Chrome 版本会跳过填充；改用null或不设初始值更可靠 - React 中首次渲染 input 时若 value 被 JS 主动设为空（哪怕
ref.current.value = ""），浏览器认为“已被用户操作”，禁用自动填充
密码字段必须成对标记，单写 new-password 没用
密码补全不是独立行为，而是上下文驱动：浏览器靠字段组合判断是登录、注册还是改密：
- 登录页：必须同时存在
autocomplete="username"或autocomplete="email"+autocomplete="current-password" - 注册/改密页：需
autocomplete="new-password"（新密码）+autocomplete="current-password"（旧密码）；两个都写new-password会导致 Safari 复用同一密码填进两栏 -
autocomplete="off"在现代浏览器中基本失效，尤其是密码字段；强行加反而干扰密码管理器 - JS 动态切换
type（如点击“显示密码”后从password改为text），必须同步重设autocomplete属性，否则填充中断
最易被忽略的点是：表单必须成功提交过一次，浏览器才会建立字段映射关系；首次填写后刷新再试，补全才可能生效。还有，同页面多个 input 用了相同 autocomplete 值（比如都设 tel），浏览器会随机选一个填充，行为不可控——得靠 name 或 DOM 位置区分语义优先级。
