浏览器自动填充需严格满足四大前提：语义正确的autocomplete值、匹配的type类型、初始dom存在、表单结构协同；任一错误（如大小写、连字符、动态渲染）均导致静默失效。
浏览器自动填充不是加个 autocomplete 属性就自动生效的功能，它依赖严格匹配 WHATWG 规范的语义值、正确的 type 类型、初始 DOM 存在、以及表单结构协同——写错一个连字符、大小写或用错场景，Chrome 和 Safari 都会静默跳过，不报错也不提示。
autocomplete 值必须严格按规范写，拼错等于没写
浏览器只识别标准 token，不接受任何变体。常见错误包括大小写错误、多余连字符、自定义命名等。
-
email✅ 有效；Email、user-email、mail❌ 全部被忽略 -
given-name✅（名）；firstname、first-name、Name❌ -
street-address✅；address、shipping-address、address-line1（注意是line1，不是line-1）❌ -
postal-code✅；zip、postcode、pincode❌ -
current-password和new-password必须区分使用，混用会导致密码填错或保存失败
type 和 autocomplete 必须协同，不能只靠其中一个
两者是绑定生效的：浏览器既看语义标签，也看输入行为。单独写对一个，效果大打折扣。
-
type="email"+autocomplete="email"→ 邮箱键盘弹出 + 自动填充候选最稳定 -
type="tel"+autocomplete="tel"→ 手机号建议准确率明显更高；type="number"+autocomplete="tel"❌ 键盘冲突，填充常失效 -
type="date"+autocomplete="bday"→ 才能唤起生日历史；type="text"即使值对也无效 -
type="number"+autocomplete="postal-code"→ Chrome 会禁用自动填充，必须用type="text"或type="tel" -
type="search"、type="url"、type="hidden"等类型不支持任何autocomplete值
动态渲染表单时，autocomplete 极易失效
浏览器只在页面首次加载时扫描 DOM 并建立字段映射。JS 动态插入或框架状态切换后才出现的 <input>，大概率被跳过。
- React 中
{show && <input autocomplete="email">}→ 字段挂载晚于浏览器初始化，填充失效 - Vue 中
v-if控制显隐 → 同样错过扫描时机 - 受控组件中只写
value={state}却没配onChange→ 字段变只读，浏览器直接跳过 - SSR 页面若由客户端 JS 补上
autocomplete属性 → 完全无效；服务端必须直出完整属性 - 同一页面多个字段共用相同
autocomplete值（如两个都写tel）→ 浏览器随机选一个填，行为不可控
地址类字段要成组、顺序合理、前缀明确
地址自动填充不是单字段行为，浏览器要求至少两个关联字段连续存在，且语义可推断上下文。
- 单行地址用
street-address；多行拆分用address-line1+address-line2（注意无连字符） - 中国省/市必须用
address-level1（如“广东省”）、address-level2（如“深圳市”），不是province或city - 收货地址和账单地址需隔离时，加前缀：
shipping street-address、billing postal-code；前缀仅限shipping、billing、home、work - 移动端 Safari 对
address-level2支持弱，可额外加name="city"提升兼容性 - 所有地址字段必须包裹在同一个
<form></form>内，且不能被autocomplete="off"父级干扰
最容易被忽略的是：字段必须在初始 HTML 中就存在、autocomplete 值必须在元素插入 DOM 前就设置好、密码字段必须成对且类型匹配——这些不是“可选优化”，而是触发自动填充的硬性前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
