浏览器通过 autocomplete 属性（而非 class 或 placeholder）识别表单字段语义，必须使用 WHATWG 官方值如 autocomplete="email" 或 autocomplete="given-name"，且表单需包裹在 <form> 中、有合法提交按钮、用户曾手动提交过；动态渲染需确保 autocomplete 在挂载时即存在。
HTML 表单字段怎么让浏览器自动匹配到姓名、邮箱这些语义？
浏览器对 <input> 的自动填充（autofill）不是靠 class 或 placeholder 猜的，而是严格依赖 name 和 autocomplete 属性。只写 name="email" 不够，必须配 autocomplete="email"，否则 Chrome、Safari 都可能跳过识别。
-
autocomplete值必须是 WHATWG 官方列表里的值，比如autocomplete="given-name"（不能写成first-name） -
name属性可以任意，但建议和autocomplete一致（如name="email" autocomplete="email"），避免后端解析混乱 - 地址类字段（如省、市、街道）要分拆成独立
<input>，用autocomplete="address-level1"、autocomplete="address-level2"等，合在一个textarea里浏览器基本不识别
为什么加了 autocomplete 还是没触发智能填充？
常见原因是表单结构或上下文不符合浏览器策略：表单必须有 <form> 包裹；提交按钮得是 <button type="submit"> 或 <input type="submit">；且用户得在该站点有过手动填写+提交的历史（仅靠页面加载不会激活）。
- 页面加载后动态插入的表单（比如 JS 渲染的登录弹窗），需确保 DOM 插入完成后再触发
focus()到第一个字段，否则部分浏览器忽略 - 使用
autocomplete="off"的父级<form>会禁用所有子字段的自动填充，哪怕单个<input>写了autocomplete="email" - Safari 对
autocomplete值校验更严，比如autocomplete="tel"无效，得用autocomplete="tel-national"或autocomplete="tel-local"
如何验证当前字段是否被浏览器识别？
打开 Chrome DevTools → Elements 面板 → 选中 <input> → 在右侧 Properties 标签页下拉到底，找 autofill 相关属性（如 autofillState）。如果显示 autofilled 或 autofillCandidate，说明识别成功；若为 none，大概率是 autocomplete 值非法或上下文缺失。
- 快捷验证法：右键点击字段 → “检查元素” → 查看 computed 样式里是否有
-webkit-autofill背景色（黄色底纹），有则表示已命中自动填充 - 注意：本地文件（
file://协议）下 Chrome 默认禁用 autofill，必须用http://或https://服务访问
React/Vue 项目里动态生成表单字段要注意什么？
框架的响应式更新可能导致 autocomplete 属性在 DOM 中未及时生效，尤其在条件渲染（如 v-if 或 {show && <input>}）后首次挂载时。
立即学习“前端免费学习笔记（深入）”；
- 不要用
autocomplete={isEmail ? "email" : "off"}这类动态值，浏览器可能缓存旧状态；优先用固定值 + CSS 控制显隐 - Vue 中避免在
v-for里直接绑定:autocomplete="item.type"，应预处理映射表（如{ email: 'email', phone: 'tel-national' }），防止传入非法字符串 - React 中若用
useEffect延迟设置autocomplete，会导致首次聚焦时无提示——属性必须在元素挂载时就存在
autocomplete 值、甚至只是把 <form> 换成 <div>，之前的记忆就全失效了。 
