Autofill

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

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

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

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

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

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

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

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

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

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

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

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

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

很多人不擅长记住密码。最常见的 密码是 “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" 以防止自动填充。

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

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

检查您的理解情况

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

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

autocomplete="new-password"
autocomplete="off"
autocomplete="password"
autocomplete="current-password"

资源