Autofill

第 10 次重新输入地址很麻烦。浏览器以及您 可以帮助用户更快地输入数据，避免重复输入数据。 本单元将介绍自动填充的运作方式，以及 autocomplete 和其他 元素属性可确保浏览器提供适当的自动填充选项。

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

在自动填充简介中，您已经学习了 自动填充。但是，为什么浏览器提供自动填充功能呢？

填写表单虽然很有趣 。随着时间的推移，您填写了许多表单，并且经常填写相同的数据。 要帮助用户更快地填写表单，一种方法就是为用户提供 用以前输入的数据自动填写表单字段。这就是自动填充。

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

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

如果您提交此表单字段，浏览器会存储该值（您输入的数据） 和 name 属性的值（名称）。有些浏览器还会 id 属性。

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

<ph type="x-smartling-placeholder">

</ph> 注意：请使用 :autofill CSS 伪类为浏览器自动填充的表单控件设置样式。为实现最佳的浏览器兼容性，请使用 :autofill 和带前缀的版本 :-webkit-autofill。

在您经常使用的表单（例如注册表单和 登录、付款、结账和表单（您必须输入自己的姓名）或 地址。

您可以使用适当的 autocomplete 属性的值。autocomplete 具有许多可能的值。以下是地址的示例。

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

并非每个地址表单都有相同的字段，而且字段的顺序也会有所不同。 对 autocomplete 使用正确的值可确保浏览器填充 表单的正确值。country、postal-code、 以及许多 更多。

注意 ：您可以为 autocomplete 定义多个值，并用空格进行分隔。假设您有一个包含送货地址的表单和另一个账单邮寄地址表单。如需告知浏览器哪个邮政编码是账单邮寄地址，您可以使用 autocomplete="billing postal-code"。对于送货地址，请使用 shipping 作为第一个值。

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

很多人不擅长记住密码。最常见的 密码是 “123456”，后跟其他简单易记的组合。如何使用 安全且唯一的密码，却不记得所有密码？

浏览器内置密码管理器，可生成、保存和填充密码 密码了解如何帮助浏览器使用自动填充电子邮件功能 和管理密码

您可以对电子邮件字段使用 autocomplete="email"，以便用户能够获取自动填充服务 选项。

由于这是一份注册表单，因此用户之前应该不会看到填写选项 使用密码。您可以使用 autocomplete="new-password" 来确保 提供生成新密码的选项。

注意 ：为确保注册表单安全，建议您使用第三方身份提供方，而不是构建您自己的身份验证系统。

在登录表单中，您可以使用 autocomplete="current-password" 来告诉用户 以便为此浏览器提供相应选项， 网站。

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

如果短信中给出的验证码是建议的代码，是不是很棒？ 直接选中该键盘即可填充 值？在 Safari 14 或更高版本中，您可以使用 autocomplete="one-time-code" 来实现这一目标。在 Android 版 Chrome 中，您可以使用 WebOTP API 来实现 使用 JavaScript 实现这一功能

详细了解如何利用短信动态密码表单在网上验证电话号码 最佳做法。

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

帮助用户填写信用卡信息

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

您可以再次使用 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" 以防止自动填充。

注意 ：自动填充和自动补全功能可提供无障碍功能方面的优势。借助自动填充功能，用户无需记住信息，也无需手动重新输入数据。如需了解详情，请参阅 W3C 无障碍功能指南

autocomplete="off" 的另一个用例是 honeypot 字段（请参阅上一节内容） 模块）。虽然字段不是 则浏览器可能会使用其余字段自动填充该字段。正在启用自动填充功能 关闭，可确保系统不会将真实用户识别为聊天机器人， 已自动完成。

注意 ：您已了解使用唯一且安全的密码的重要性。浏览器内置密码管理工具可确保您使用安全系数高的密码。因此，即使使用了 autocomplete="off"，浏览器仍会提供密码自动填充选项，以允许这些密码管理工具执行其相应操作。详细了解自动补全属性和登录字段。

仅当您确信自动填充功能对用户有帮助时，才应停用该功能。

检查您的理解情况

测试您对自动填充功能的掌握情况

您应该为注册表单中的“密码”字段使用哪个自动补全值？

autocomplete="password"

再试一次！

autocomplete="off"

再试一次！

autocomplete="new-password"

🎉

autocomplete="current-password"

再试一次！

资源

• 自动填充 属性。
  • 付款和地址表单最合适 做法