第 10 次重新输入地址很麻烦。浏览器以及您
可以帮助用户更快地输入数据,避免重复输入数据。
本单元将介绍自动填充的运作方式,以及 autocomplete
和其他
元素属性可确保浏览器提供适当的自动填充选项。
自动填充功能是如何运作的?
在自动填充简介中,您已经学习了 自动填充。但是,为什么浏览器提供自动填充功能呢?
填写表单虽然很有趣 。随着时间的推移,您填写了许多表单,并且经常填写相同的数据。 要帮助用户更快地填写表单,一种方法就是为用户提供 用以前输入的数据自动填写表单字段。这就是自动填充。
浏览器如何知道要自动填充哪些数据?查看示例表单 字段。
<label for="name">Name</label>
<input name="name" id="name">
如果您提交此表单字段,浏览器会存储该值(您输入的数据)
和 name
属性的值(名称)。有些浏览器还会
id
属性。
假设几周后,您在另一个网站上填写了另一份表单。此网站还
包含带有 name="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 实现这一功能
详细了解如何利用短信动态密码表单在网上验证电话号码 最佳做法。
帮助用户填写信用卡信息
在许多电子商务网站上,您可以使用信用卡购买商品。 网站可能会使用提供自有表单的第三方付款平台, 但一定要创建自己的付款表单,确保用户可以轻松填写 付款信息。
您可以再次使用 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"