autocomplete属性必须填WHATWG规范定义的标准语义值才被识别，如street-address、address-line1、postal-code、country、tel、email等，大小写敏感且不可拼错或自定义；非标准值如“shipping address”或“user-email”会被浏览器忽略。
autocomplete 属性填什么值才被浏览器识别
浏览器只认标准的 autocomplete 值，填错或自定义字段名（比如 autocomplete="address-line1" 拼错）就完全失效。必须严格按 WHATWG 规范 使用语义化 token。
常见有效值示例：
-
autocomplete="street-address"（对应街道地址，不是"address"） -
autocomplete="address-line1"和autocomplete="address-line2"（分两行时用，注意是line1不是line-1） -
autocomplete="postal-code"（不是"zip"或"postcode"） -
autocomplete="country"（下拉选国家时用，select元素也支持） -
autocomplete="tel"、autocomplete="email"等基础字段可直接复用
为什么 autocomplete="shipping address" 不起作用
因为 autocomplete 不接受自然语言描述，只接受预定义的 token。像 "shipping address" 这种字符串会被浏览器忽略——它既不是规范值，也不是组合语法（如 "shipping street-address" 是合法的）。
需要区分用途场景时，用空格拼接前缀：
立即学习“前端免费学习笔记（深入）”；
- 收货地址：
autocomplete="shipping street-address" - 账单地址：
autocomplete="billing postal-code" - 仅当表单含多个地址块且需隔离自动填充时才加前缀；单地址表单直接用
street-address即可
前缀必须是 shipping、billing、home 或 work 之一，其他词无效。
input type 和 autocomplete 配合出问题怎么办
某些 type 值会覆盖或干扰 autocomplete 行为。例如：type="text" 能正常触发地址建议，但 type="search" 或 type="url" 可能被浏览器当作非地址字段跳过。
实操建议：
- 地址字段统一用
type="text"，哪怕内容是邮编——type="number"会导致 iOS 键盘弹数字键盘，反而影响用户输入字母（如加拿大邮编 A1A 1A1） -
type="tel"配autocomplete="tel"可触发号码建议，但不要用于地址字段 - 避免给地址字段设
pattern或inputmode，它们可能抑制自动填充逻辑
Chrome / Safari 自动填充不出现的隐蔽原因
即使属性写对了，也可能因结构问题被忽略：浏览器要求地址字段必须在同一个 form 内连续出现，且至少包含两个关联字段（如 street-address + postal-code），否则视为孤立输入不予建议。
容易被忽略的细节：
- 字段顺序要符合现实逻辑：先
address-line1，再address-line2，然后postal-code、country——乱序可能让浏览器无法关联 - 隐藏字段（
display: none或visibility: hidden）会被跳过，动态显示的地址块需确保初始渲染时 DOM 已存在 - 第三方 JS 框架（如 React）中若用
value+onChange完全控制输入，可能阻断浏览器原生填充，此时需手动触发input事件或使用defaultValue
最稳妥的做法：先写纯 HTML 表单验证效果，再叠加交互逻辑。
