autocomplete属性必须加在input、textarea、select标签上，但仅input真正生效；textarea和select基本被忽略，且不可写在form上。
autocomplete 属性该加在哪个标签上
只对 <input>、<textarea></textarea>、<select></select> 有效，但绝大多数场景下只有 <input> 真正起作用；<textarea></textarea> 和 <select></select> 即使写了 autocomplete，浏览器也基本忽略。
常见错误是给 <form></form> 加 autocomplete="on" —— 这个属性不支持写在 <form></form> 上（HTML5 规范已移除该用法），写了也没效果。
- 必须逐个
<input>设置，比如登录页的邮箱、密码、用户名字段要分别加 - 如果表单有多个同类型字段（如“收货地址”和“发票地址”都含“电话”），靠
name或id不够，得靠autocomplete值区分语义 - 移动端键盘类型（数字键盘、邮箱键盘）是否弹出，也依赖
autocomplete+type的组合，光设type="tel"不够稳定
autocomplete 值不是随便写的字符串
它是一套预定义的枚举值，浏览器只识别标准关键词，写错就当没写。比如想让浏览器自动填手机号，不能写 autocomplete="mobile" 或 autocomplete="phone"，而必须用 autocomplete="tel"。
密码字段尤其容易踩坑：必须同时满足三个条件，浏览器才敢自动填充密码 —— type="password" + autocomplete="current-password"（登录）或 "new-password"（注册/改密），缺一不可。
立即学习“前端免费学习笔记（深入）”；
- 常用值：
"email"、"given-name"、"family-name"、"tel"、"street-address"、"bday" - 密码相关必须用
"current-password"或"new-password"，写成"password"会被忽略 - 自定义值如
autocomplete="off"仅在部分浏览器生效，且现代浏览器（Chrome 80+）会无视它来保护用户密码体验
为什么设置了 autocomplete 还不触发自动填充
最常见原因是字段顺序和语义不匹配。浏览器不是靠 DOM 顺序猜，而是按 autocomplete 值的逻辑链判断上下文 —— 比如它期望先看到 autocomplete="email"，再看到 autocomplete="current-password"，中间插了个 autocomplete="organization"，可能直接放弃整组填充。
另一个隐蔽问题是动态渲染：用 JS 插入的 <input>，如果插入后才补 autocomplete 属性，部分浏览器（尤其是 Safari）不会重新扫描，导致失效。
- 确保关键字段（邮箱/账号 + 密码）相邻且顺序合理，避免中间夹杂非标准字段
- 动态生成的表单，属性必须在元素插入 DOM 前就设置好，不要 insert 后再 setAttribute
- 检查控制台是否有
[Autofill] Ignoring autocomplete value类警告，说明值不合法
autocomplete 与 type、name 的关系
type 决定输入行为（如 type="email" 触发邮箱校验和软键盘），name 影响表单提交键名，而 autocomplete 单独负责告诉浏览器“这个框你该填什么”。三者互不替代，但协同影响体验。
例如一个搜索框，type="search" + name="q" + autocomplete="off" 是常见组合；但如果误把 autocomplete="search" 当成合法值，实际无效 —— "search" 不在标准列表里。
-
name值不影响自动填充，但旧版 IE 曾依赖它，现在纯属冗余 -
type="text"配autocomplete="tel"，仍能唤起数字键盘；但type="number"配autocomplete="tel"可能被某些安卓浏览器降级为普通键盘 - 禁用自动填充别用
autocomplete="off"，优先考虑autocomplete="new-password"（对密码字段）或随机化name（对非敏感字段）
真正难的不是写对属性，而是理解浏览器怎么“读”你的表单结构 —— 它像一个语义解析器，而不是样式渲染器。字段之间有没有逻辑断裂，值是不是标准枚举，插入时机对不对，这些细节卡住，autocomplete 就静默失效。
