Autofill

不得不第 10 次重新输入地址，这让人感到疲惫。浏览器和您（作为开发者）可以帮助用户更快地输入数据，并避免重新输入数据。本模块将介绍自动填充功能的运作方式，以及 autocomplete 和其他元素属性如何确保浏览器提供合适的自动填充选项。

自动填充功能是如何运作的？

在自动填充简介中，您已经了解了自动填充的基础知识。但为什么浏览器会提供自动填充功能？

填写表单并不是一项有趣的活动，但您仍然经常需要这样做。随着时间的推移，您会填写许多表单，并且经常填写相同的数据。 帮助用户更快填写表单的一种方法是，为用户提供自动填充表单字段的选项，以便用户使用之前输入的数据自动填充表单字段。这就是自动填充。

浏览器如何知道要自动填充哪些数据？不妨查看表单字段示例。

<label for="name">Name</label>
<input name="name" id="name">

如果您提交此表单字段，浏览器会存储该值（您输入的数据）以及 name 属性（名称）的值。某些浏览器在存储和填充数据时还会查看 id 属性。

假设几周后，您在另一个网站上填写了另一份表单。此网站还包含一个带有 name="name" 的表单字段。由于已存储名称值，因此浏览器现在可以提供自动填充功能。

自动填充功能在您经常使用的表单中特别有用，例如注册和登录表单、付款和结账表单，以及您必须输入姓名或地址的表单。

您可以使用 autocomplete 属性的适当值，帮助浏览器提供最佳的自动填充选项。autocomplete 有许多可能的值。以下是地址示例。

您的浏览器是否已为您保存了地址？太棒了！当您与地址表单中的第一个字段互动后，浏览器会向您显示已保存地址的列表。您可以选择一个地址，然后浏览器会填充与该地址相关的所有字段。自动填充功能可让您更快速、轻松地填写表单。

并非所有地址表单都具有相同的字段，并且字段的顺序也各不相同。 为 autocomplete 使用正确的值可确保浏览器为表单填充正确的值。有 country、postal-code 和更多值。

确保用户可以快速登录并使用安全密码

许多人都不擅长记住密码。最常见的密码是“123456”，其次是其他容易记住的组合。如何使用安全系数高且独一无二的密码，同时又无需记住所有密码？

浏览器内置了密码管理工具，可为您生成、保存和填充密码。了解如何帮助浏览器自动填充电子邮件地址和管理密码。

您可以为电子邮件字段使用 autocomplete="email"，以便用户获得电子邮件地址的自动填充选项。

由于这是一个注册表单，因此用户不应获得填写之前使用过的密码的选项。您可以使用 autocomplete="new-password" 确保浏览器提供生成新密码的选项。

在登录表单中，您可以使用 autocomplete="current-password" 指示浏览器提供用于自动填充之前为此网站保存的密码的选项。

您可以在许多网站上设置双重身份验证。除了密码之外，系统还会通过短信或双重身份验证应用发送一次性验证码。

如果屏幕键盘可以建议您在短信中收到的验证码，并且您可以直接选择该验证码来填写相应值，那岂不是很好？在 Safari 14 或更高版本中，您可以使用 autocomplete="one-time-code" 来实现此目的。在 Android 版 Chrome 中，您可以使用 WebOTP API 通过 JavaScript 实现此目的。

详细了解如何通过 SMS OTP 表单最佳实践在网页上验证电话号码。

注意：短信本身并不是最安全的身份验证方法，因为电话号码可能会被回收和盗用。不妨考虑使用其他双重身份验证方法或多重身份验证。

帮助用户填写信用卡信息

在许多电子商务网站上，您都可以使用信用卡购买商品。 网站可能会使用提供自有表单的第三方付款平台，但如果您确实需要自行构建付款表单，请确保用户可以轻松填写付款信息。

您可以再次使用 autocomplete 属性，以确保浏览器提供正确的自动填充选项。

信用卡号 cc-number、信用卡到期日期 cc-exp 以及信用卡付款所需的所有其他信息都有相应的值。

使用单个输入源来输入信用卡号和电话号码等数字，以确保浏览器提供自动填充功能。请使用标准表单元素（例如用于输入付款卡日期的 <select>），而不是自定义元素，以确保自动补全功能可用。

详细了解如何帮助用户避免重新输入付款数据。

确保自动填充功能适用于所有字段

除了地址、账号信息和信用卡信息之外，浏览器还可以在许多其他字段中帮助用户使用自动填充功能。

向表单添加电话字段时，请检查是否可以使用任何可用的自动补全值。为表单字段找到了合适的值？添加。

为 autocomplete 属性使用合适的值有助于浏览器提供最佳的自动填充选项，并帮助用户更快地填写表单。

帮助浏览器了解不应自动填充某个字段

您已了解自动填充的运作方式、如何帮助浏览器进行自动填充，以及自动填充为何能让用户更轻松地填写表单。不过，有时您不希望浏览器提供自动填充功能。

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

在输入一次性唯一值（例如一次性验证码字段）时，自动填充功能无法提供帮助。该值每次都不同，并且浏览器不应保存值或提供自动填充选项。您可以为这类字段使用 autocomplete="off" 来防止自动填充。

autocomplete="off" 的另一个用例是蜜罐字段（请参阅上一个模块）。即使该字段不可见，浏览器也可能会自动填充该字段以及其余字段。关闭自动填充功能可确保真实用户不会因字段自动完成而被识别为机器人。

只有在确信停用自动填充功能有助于用户时，才应停用该功能。

检验您的掌握情况

测试您对自动填充功能的了解程度

资源

• autocomplete 属性。
  • 有关付款和地址表单的最佳实践