html5 autocomplete属性需准确使用标准值（如name、email、tel等）才能触发浏览器自动填充，避免自定义值；须配合正确type属性、语义化form结构、label关联及name一致性，并在多浏览器和移动端实测验证。
HTML5 的 autocomplete 属性能显著减少用户重复输入，加快表单填写速度，尤其在地址、联系方式、支付信息等常见字段中效果明显。关键不在于“加不加”，而在于“怎么加才准确有效”。
用对 autocomplete 值，浏览器才真能自动填充
浏览器依赖标准的 autocomplete 值（如 name、email、tel、street-address）识别字段用途。填错或自定义值（如 autocomplete="myname"）会导致自动填充失效。
- 姓名：用
autocomplete="name"（不区分 first/last，浏览器会按用户保存的完整姓名匹配） - 邮箱：必须用
autocomplete="email"，不是"user-email"或其他变体 - 手机号：用
autocomplete="tel"；带区号可拆为autocomplete="tel-country-code"+autocomplete="tel-national" - 地址行：优先用
autocomplete="street-address"；若分两行（如 address1/address2），第二行可用autocomplete="address-line2" - 信用卡号：用
autocomplete="cc-number"，配合cc-exp、cc-csc等确保整套支付字段联动识别
避免常见干扰项，防止自动填充被禁用
即使写了正确的 autocomplete 值，以下情况仍会让浏览器跳过填充：
-
type 属性冲突：比如邮箱字段写成
type="text"却配autocomplete="email"——应统一为type="email" - 动态生成或 JS 覆盖 value：页面加载后用 JS 清空或重设 input.value，可能中断浏览器的自动填充时机
-
autocomplete="off"：全局禁用会覆盖所有字段；如确需关闭某一项，改用
autocomplete="new-password"（用于密码重置框）更安全 -
表单无明确 action 或被包裹在非 form 元素中：浏览器倾向只对语义化
<form></form>内的字段启用智能填充
结合 label 和 name 属性，提升兼容性与可访问性
autocomplete 是增强手段，不是唯一依赖。搭配合理的 <label for="id"></label> 和语义化 name 属性，既能帮屏幕阅读器理解字段，也能辅助旧版浏览器或隐私模式下的基础识别。
- 每个 input 都应有显式关联的 label（避免仅靠 placeholder 提示）
-
name值建议与后端字段一致（如name="billing_address"），同时配autocomplete="street-address" - 对于多选地址（如国家下拉+省市区联动），国家字段用
autocomplete="country"，省/市字段目前无强制标准值，可暂用autocomplete="address-level1"和autocomplete="address-level2"
测试不能只看 Chrome，多环境验证很关键
不同浏览器对 autocomplete 的支持粒度不同：Chrome 对 address-line2、organization 支持较好；Safari 在 macOS/iOS 上对 tel 和 email 更敏感；Firefox 则更依赖完整的表单结构和 type 匹配。
- 本地测试时，先用真实数据手动提交一次表单，让浏览器记住该组字段组合
- 清空浏览器自动填充设置（Chrome：设置 > 密码和自动填充 > 地址和更多），再重新触发，观察是否弹出建议栏
- 移动端务必在 iOS Safari 和 Android Chrome 上实机测试——软键盘唤起的自动填充提示框行为与桌面端不同
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
