浏览器仅识别whatwg规范定义的autocomplete值，大小写、拼写或自定义字段名均导致彻底失效；必须严格匹配标准关键词，且需与type、label、id、name协同生效。
浏览器只认 WHATWG 规范里明确定义的 autocomplete 值，写错、大小写不对、拼写偏差或自定义字段名（比如 user_name、phone）都会被直接忽略——不是“效果差”，而是彻底失效。
autocomplete 值必须严格匹配标准关键词
Chrome、Safari、Edge 等主流浏览器对 autocomplete 的识别是白名单机制，不支持模糊匹配或业务字段映射。
-
autocomplete="name"✅ 有效（全名），但autocomplete="fullname"❌ 无效 -
autocomplete="email"✅ 有效，autocomplete="user-email"或autocomplete="mail"❌ 无效 -
autocomplete="given-name"✅ 有效（名），autocomplete="firstname"❌ 无效（大小写敏感 + 非标准） - 密码字段必须成对：登录页用
autocomplete="current-password"，注册/改密页用autocomplete="new-password"；混用或写成autocomplete="password"会导致密码管理器不识别
type 和 autocomplete 必须逻辑一致
浏览器会交叉验证 type 和 autocomplete。两者冲突时，type 通常优先，但补全行为可能被降级甚至取消。
-
type="tel"+autocomplete="tel"✅ 最可靠，触发数字键盘 + 历史电话填充 -
type="text"+autocomplete="tel"⚠️ 多数场景可用，但 iOS Safari 可能跳过补全 -
type="number"+autocomplete="tel"❌ 不推荐，数字类型与电话字符串语义冲突，Chrome 会忽略补全逻辑 -
type="date"+autocomplete="bday"✅ 生日字段才真正生效；若写成type="text"，即使值对，也不会唤起日期选择器或填充历史生日 -
type="search"❌ 所有autocomplete值均被浏览器忽略，该类型无自动补全能力
label、id、name 缺一不可
浏览器依赖可访问性线索（尤其是 label 绑定关系）辅助推断字段用途。缺失或错误绑定会显著降低补全识别率，尤其在 Safari 和旧版 Edge 中。
- 每个
<input>必须有唯一id，且对应<label for="xxx"></label>；动态插入的 input 要同步生成 id 并绑定 label - 避免
id重复：复制粘贴代码后多个label指向同一个input，会导致补全失效 -
label文本要有语义，例如写“手机号”比“请输入”更利于识别；仅靠placeholder推断字段类型不可靠 - 搭配
name属性使用更稳妥，例如：<input name="full_name" autocomplete="name">
动态渲染表单时 autocomplete 容易失效
React、Vue 或纯 JS 动态插入 <input> 元素时，autocomplete 常常不工作——根本原因不是语法错，而是 Chrome 要求 input 在页面初始加载完成时已存在于 DOM，且未被设过 value（哪怕设为空字符串）。
- 不要在组件挂载后用
input.autocomplete = "name"动态赋值，浏览器已跳过初始化阶段 - 避免在
input上预设value=""或value=" "，这会触发浏览器“该字段已有值”的判断，直接禁用补全 - 服务端渲染（SSR）或静态 HTML 中直接写出带
autocomplete的 input 是最稳定的方式 - 若必须动态生成，建议用
innerHTML一次性注入完整结构（含id、name、autocomplete），而非逐个属性设置
真正卡住补全功能的，往往不是“没写 autocomplete”，而是 autocomplete 值写对了、type 却不匹配，或者 label 绑定漏了、id 重复了、input 是 JS 后插的——这些细节浏览器不会报错，只会沉默地跳过补全。调试时优先检查这四点，比重写逻辑更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
