浏览器自动填充依赖autocomplete值、type属性和dom结构三者严格协同，任一不匹配（如大小写错误、非标值、脱离form）即失效；必须用given-name/family-name而非name，tel而非telephone，current-password/new-password成对使用，且type与autocomplete须一致。
浏览器自动填充不是靠“加个属性就生效”，而是严格按 WHATWG 规范匹配 autocomplete 值 + type + DOM 位置三者协同；填错任意一项，字段大概率被跳过，尤其在 Safari 和新版 Chrome 中。
autocomplete 值必须完全匹配规范，大小写/拼写/连字符都不能错
浏览器只认标准 token，比如 email 有效，Email、user-email、user_email 全无效。常见字段对应关系：
-
given-name和family-name才能触发姓名拆分填充；name是模糊 fallback，Safari 直接忽略 - 地址行必须用
street-address，写成address或shipping-address不生效 - 手机号必须是
tel，telephone、mobile不被识别 - 省、市分别对应
address-level1和address-level2，province、city无效 - 密码字段必须区分：
current-password（登录页），new-password（注册/改密页）
type 属性和 autocomplete 必须协同，不能只靠一个
仅设 autocomplete="email" 但 type="text"，触发率远低于 type="email" + autocomplete="email"。Safari 尤其依赖 type 的语义强度：
-
type="email"+autocomplete="email"→ 邮箱建议最稳定 -
type="tel"+autocomplete="tel"→ 触发系统电话键盘，且填充准确率更高 -
postal-code字段若用type="number"，Chrome 会禁用自动填充，必须用type="text"或type="tel" -
type="password"字段没配对autocomplete，浏览器可能把邮箱或旧密码塞进去
表单结构与 DOM 时机影响填充是否触发
自动填充不是“页面一加载就填”，它依赖用户交互和表单上下文：
- 必须包裹在
<form></form>标签内，单独的<input>不会被记录 - 用户需主动聚焦（点击或 Tab 进入）该字段，且表单至少成功提交过一次，浏览器才建立填充记忆
- React/Vue 等框架中，若用
v-model或受控组件但未初始化对应字段，DOM 渲染时值为空，浏览器认为“不可编辑”而跳过 - 动态插入的表单（如 modal 弹出后挂载），要确保初始 DOM 即含正确
autocomplete和type，不能等 JS 补充 - Safari 对
address-level2（市）支持弱，可额外加name="city"提升兼容性
密码字段防误填的关键不是关掉，而是语义隔离
所谓“防自动填充”其实是防止填错位置，不是禁用功能：
- 登录页密码框必须设
autocomplete="current-password"，且前面要有username或email字段 - 注册页两个密码框（新密码 + 确认）都得设
autocomplete="new-password"，否则 Safari 可能复用上一次生成的密码填进两个框 - 不要用
autocomplete="off"—— Chrome ≥117 忽略，Safari 16+ 当真；真正有效的“不填这里”信号只有autocomplete="new-password" - 混合表单（如注册+登录共存）中，密码字段别紧贴邮箱之后；中间插入
<input type="hidden">或视觉分隔元素，有助于打断自动填充链
最常被忽略的一点：自动填充效果高度依赖用户本地是否保存过对应类型的数据。国内多数用户从未在 Chrome 设置里手动添加完整中文地址或银行卡信息，所以即使代码全对，street-address 或 cc-number 字段也可能始终空白——这不是 bug，是数据源头缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
