HTML表单自定义填充规则详解

HTML表单的autocomplete属性并非“一加就灵”，其失效往往源于开发者对WHATWG规范的误解：关键词必须精确匹配（如用“given-name”而非“name”）、大小写敏感、地址需结构化拆分为street-address/address-level2等字段、密码必须成对声明（new-password搭配current-password或email），而React/Vue等框架中动态渲染、条件隐藏或SSR缺失更会直接切断浏览器的字段识别时机——自动填充本质是浏览器基于语义、历史与结构一致性做出的智能决策，唯有严格遵循规范、显式表达字段逻辑关系，才能真正唤醒这一被严重低估的用户体验利器。

浏览器为什么忽略你的 autocomplete 属性

不是浏览器不支持，而是你写的值不符合 WHATWG 规范定义的合法关键词。比如写 autocomplete="name" 看似合理，但规范里只认 autocomplete="given-name" 或 autocomplete="family-name"——写错一个连字符或大小写，Chrome 和 Safari 都会直接无视。

• 必须用规范关键词：查 WHATWG autocomplete 字段列表，别凭经验猜
• autocomplete 值对大小写敏感，"email" 有效，"Email" 无效
• 表单没提交过、没成功过，浏览器不会记住字段映射关系；首次填写后刷新再试才可能触发
• 同页面多个 input 用相同 autocomplete 值（如都写 "tel"），浏览器会随机选一个填充，行为不可控

如何让地址字段正确匹配自动填充

地址是自动填充最混乱的场景：用户填的是“上海市浦东新区张江路123号”，但浏览器只认结构化字段。你得把一个地址拆成至少 4 个带语义的 input，否则填不全。

• 街道地址用 autocomplete="street-address"（注意不是 "address"）
• 城市、省、邮编必须分开：autocomplete="address-level2"（城市）、autocomplete="address-level1"（省/州）、autocomplete="postal-code"
• 国家代码建议用 autocomplete="country" + ，别用文本框
  避免在地址字段上加 type="text" 以外的类型（比如 type="number" 用于邮编），部分浏览器会拒绝填充

  密码字段的 autocomplete 必须成对出现

  只给密码输入框加 autocomplete="new-password" 没用。浏览器需要识别“注册”或“改密”上下文，而这个上下文靠两个字段的组合来判断。

  • 新密码必须配一个旧密码字段：
  +
• 注册页则用 autocomplete="new-password" + autocomplete="email" 或 autocomplete="username"
• autocomplete="off" 在现代浏览器中基本失效，尤其对密码字段；强行禁用反而干扰密码管理器
• 如果用了 JS 动态生成密码框（比如点击“显示密码”后替换 type），需同步重设 autocomplete 属性，否则填充失效

React/Vue 项目里 autocomplete 失效的常见原因