不得不第十次重新输入你的地址真是令人厌倦。浏览器以及你作为开发者，可以帮助用户更快地输入数据，并避免重新输入数据。本模块教你自动填充的工作原理，以及 autocomplete 和其他元素属性如何确保浏览器提供适当的自动填充选项。
自动填充是如何工作的？
在自动填充简介中，你已经了解了自动填充的基础知识。但是，为什么浏览器会提供自动填充呢？
填写表单不是一项有趣的活动，但仍然是你经常做的事情。随着时间的推移，你填写了很多表单，并且经常填写相同的数据。帮助用户更快填写表单的一种方法是为他们提供自动填写先前输入的数据的表单字段的选项。这就是自动填充。
浏览器如何知道要自动填充哪些数据？看看示例表单字段来找出答案。
<label for="name">Name</label>
<input name="name" id="name">
如果你提交此表单字段，浏览器会存储该值（你输入的数据）以及 name 属性的值（name）。某些浏览器在存储和填写数据时还会查看 id 属性。
假设几周后，你在另一个网站上填写了另一个表单。此站点也包含一个 name="name" 的表单字段。你的浏览器现在可以提供自动填充，因为已经存储了 name 的值。
自动填充在您经常使用的表单中尤其有用，例如注册和登录、付款、结账以及你必须输入姓名或地址的表单。
你可以通过为 autocomplete 属性使用适当的值来帮助浏览器提供最佳的自动填充选项。autocomplete 有许多可能的值。这是一个地址示例。
你的浏览器是否已经为你保存了地址？太棒了！在你与地址表单中的第一个字段交互后，浏览器会向你显示已保存地址的列表。你可以选择一个，浏览器会填写与该地址相关的所有字段。自动填充使填写表单既快速又容易。
并非每个地址表单都具有相同的字段，并且字段的顺序也各不相同。为 autocomplete 使用正确的值可确保浏览器为表单填写正确的值。 country、postal-code 和 更多 都有对应的值。
确保用户可以快速登录并使用安全密码
许多人不擅长记住密码。最常用的密码是“123456”，其次是其他容易记住的组合。如何在不记住所有密码的情况下使用安全且唯一的密码？
浏览器具有内置的密码管理器，可以为你生成、保存和填写密码。了解如何使用自动填充电子邮件和管理密码来帮助浏览器。
你可以为电子邮件字段使用 autocomplete="email"，以便用户获得电子邮件地址的自动填充选项。
由于这是一个注册表单，因此用户不应获得填写以前使用过的密码的选项。你可以使用 autocomplete="new-password" 来确保浏览器提供生成新密码的选项。
在登录表单上，你可以使用 autocomplete="current-password" 来告诉浏览器提供填写以前为此网站保存的密码的选项。
你可以在许多网站上设置双重身份验证。除了密码之外，还会通过短信或双重身份验证应用发送一次性代码。
如果你在 SMS 消息中收到的代码由屏幕键盘建议，并且你可以直接选择它来填写值，那岂不是很棒吗？在 Safari 14 或更高版本上，你可以使用 autocomplete="one-time-code" 来实现此目的。在 Android 上的 Chrome 中，你可以使用 WebOTP API 通过 JavaScript 实现此目的。
详细了解如何使用短信 OTP 表单最佳实践在 Web 上验证电话号码。
帮助用户填写他们的信用卡信息
在许多电子商务网站上，你可以使用信用卡购买产品。网站可能会使用提供自己表单的第三方支付平台，但如果你确实需要构建自己的支付表单，请确保人们可以轻松填写支付信息。
你可以再次使用 autocomplete 属性，以确保浏览器提供正确的自动填充选项。
信用卡号 cc-number、信用卡到期日 cc-exp 以及信用卡支付所需的所有其他信息都有对应的值。
对信用卡号和电话号码等数字使用单个输入，以确保浏览器提供自动填充。使用标准表单元素，例如用于付款卡日期的 <select>，而不是自定义元素，以确保自动完成功能可用。
详细了解帮助用户避免重新输入付款数据。
确保自动填充适用于你的所有字段
除了地址、帐户信息和信用卡信息外，还有许多其他字段，浏览器可以在这些字段中帮助用户进行自动填充。
在向表单添加电话字段时，请检查是否可以使用 autocomplete 的任何可用值。找到适合你的表单字段的值了吗？添加它。
为 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="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"