Autofill

第十次必须重新输入地址真是太麻烦了。浏览器和开发者都可以帮助用户更快地输入数据,避免重复输入数据。本单元将介绍自动填充的工作原理,以及 autocomplete 和其他元素属性如何确保浏览器提供适当的自动填充选项。

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

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

填写表单并不有趣,但您还是经常会这样做。长期以来,您填写的表单很多,而且填写的数据也很多。 帮助用户更快地填写表单的一种方法是,为用户提供使用之前输入的数据自动填充表单字段的选项。这就是自动填充。

浏览器如何知道要自动填充哪些数据?请查看一个示例表单字段了解详情

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

如果您提交此表单字段,浏览器会存储相应值(您输入的数据)以及 name 属性的值(名称)。在存储和填充数据时,一些浏览器还会查看 id 属性。

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

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

您可以通过为 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="password"
再试一次!
autocomplete="off"
再试一次!
autocomplete="new-password"
🎉
autocomplete="current-password"
再试一次!

资源