autocomplete 是 HTML5 中用于 <input>、<textarea>、<select> 以及 <form> 元素的属性。它告诉浏览器是否应该自动填充表单字段，以及应该填充什么类型的数据。

使用正确的 autocomplete 值可以：

• 提升用户体验：浏览器能智能地填充用户之前保存的信息，减少手动输入。
• 提高表单转化率：尤其在移动端，自动填充可显著降低用户放弃表单的概率。
• 增强无障碍访问：辅助技术可以利用这些语义信息更好地帮助用户。
• 符合 WCAG 标准：WCAG 2.1 成功标准 1.3.5 要求识别输入目的，使用 autocomplete 是实现这一标准的关键方式。

现代浏览器（尤其是 Chrome 和 Edge）越来越倾向于忽略 autocomplete="off"，因为它们认为自动填充对用户体验有益。以下情况中浏览器通常会忽略该设置：

• 登录表单中的用户名和密码字段
• 支付信息字段
• 地址相关字段

解决方案：

• 使用更具语义的值，如 autocomplete="new-password" 来防止密码管理器自动填充现有密码。
• 使用 autocomplete="one-time-code" 用于验证码输入。
• 在 <form> 级别设置 autocomplete="off"，并在需要自动填充的字段上单独设置正确的值。
• 对于敏感字段，可以结合 readonly 和 JavaScript 来处理。

支付相关的 autocomplete 值遵循 W3C 规范，主要包括：

• cc-name — 持卡人全名
• cc-given-name — 持卡人名
• cc-family-name — 持卡人姓
• cc-number — 信用卡号码
• cc-exp — 信用卡到期日期（整体）
• cc-exp-month — 到期月份
• cc-exp-year — 到期年份
• cc-csc — 安全码（CVV/CVC）
• cc-type — 信用卡类型（如 visa、mastercard）

最佳实践：将这些值与 type="text" 或适当的 type="number" 配合使用，并确保表单使用 HTTPS 加密传输。

使用 section- 前缀 来区分不同部分的地址字段：

收货地址：

<input autocomplete="section-shipping address-line1">
<input autocomplete="section-shipping postal-code">
<input autocomplete="section-shipping country-name">

账单地址：

<input autocomplete="section-billing address-line1">
<input autocomplete="section-billing postal-code">
<input autocomplete="section-billing country-name">

浏览器会根据 section 标识符将字段分组，从而正确填充对应的地址信息。

这两个值用于密码字段，含义截然不同：

• current-password — 表示用户应输入现有密码（如登录表单）。浏览器可能会自动填充已保存的密码。
• new-password — 表示用户应输入新密码（如注册或重置密码表单）。浏览器通常不会自动填充，但可能提供强密码建议。

正确区分这两个值对安全性和用户体验都至关重要。在密码重置表单中，通常需要同时使用两者：一个 current-password 字段和一个 new-password 字段。

在移动端，正确使用 autocomplete 属性影响巨大：

• 键盘优化：浏览器会根据 autocomplete 值自动切换合适的键盘类型（如 tel 触发数字拨号键盘）。
• 一键填充：iOS Safari 和 Android Chrome 都能根据 autocomplete 值从钥匙串或 Google 自动填充服务中快速填充信息。
• 转化率提升：研究表明，移动端表单如果支持自动填充，转化率可提升 25%-40%。
• 减少输入错误：自动填充可避免手动输入拼写错误，尤其在地址和支付信息场景中。

移动端是使用 autocomplete 属性收益最大的平台。

autocomplete 属性本身不会引入安全漏洞，但需要注意以下几点：

• 敏感信息（如信用卡号）应始终在 HTTPS 页面上使用 autocomplete。
• 在公共计算机上，自动填充可能被后续用户利用。对于敏感应用，可考虑设置 autocomplete="off"（尽管浏览器可能忽略）。
• autocomplete="one-time-code" 是专门为短信验证码设计的，浏览器会从短信中自动提取验证码，这既方便又安全。
• 不要在隐藏字段中使用敏感的 autocomplete 值，以防止意外泄露。

总体而言，正确使用 autocomplete 不会降低安全性，反而可以通过减少手动输入来降低键盘记录器等威胁的风险。

autocomplete 属性拥有极佳的浏览器兼容性：

• Chrome：完全支持（桌面版和移动版）
• Firefox：完全支持
• Safari：完全支持（包括 iOS Safari）
• Edge：完全支持
• Opera：完全支持
• Internet Explorer：部分支持（IE11 支持基本值，但不支持所有详细值如 section- 前缀）

全球超过 97% 的浏览器都支持 autocomplete 属性。详细的值（如 address-level1）在现代浏览器中也都得到良好支持。对于不支持的旧浏览器，该属性会被安全地忽略。

测试 autocomplete 属性的方法：

1. Chrome DevTools：打开开发者工具 → Application → Storage → 查看自动填充数据。
2. 手动测试：在浏览器中保存一些测试地址和支付信息，然后打开表单查看自动填充建议是否正确。
3. 使用 Lighthouse：Chrome 的 Lighthouse 审计工具可以检测表单是否使用了正确的 autocomplete 值。
4. 真实设备测试：在 iOS 和 Android 设备上测试，因为移动端的自动填充行为与桌面端有所不同。
5. 检查辅助功能：使用屏幕阅读器验证 autocomplete 值是否被正确识别和朗读。

建议在多个浏览器和平台上进行测试，以确保最佳的用户体验。