如何关闭表单自动填充

本文介绍如何在网站上为表单字段禁用自动填充。

理解自动填充和自动填充

默认情况下,浏览器会记住用户通过网站上的 `<input>` 字段提交的信息。这使得浏览器能够提供自动填充(即,对用户已开始输入内容的字段提出可能的填充建议)或自动填充(即,在加载时预填充某些字段)。

这些功能通常是默认启用的,但它们可能引起用户的隐私担忧,因此浏览器可以让用户禁用它们。然而,在表单中提交的某些数据要么除了当前交互之外没有其他用途(例如,一次性 PIN 码),要么包含敏感信息(例如,唯一的政府标识符或信用卡安全码)。作为网站作者,您可能希望浏览器不要记住这些字段的值,即使浏览器的自动填充功能已启用。

注意: WCAG 2.1 成功标准 1.3.5:识别输入目的 不要求必须启用自动填充或自动填充功能;它只要求与特定个人用户信息相关的表单字段在程序上得到识别。这意味着,即使表单本身的自动填充已关闭,该标准仍然可以被满足(通过为各个表单字段添加相关的 autocomplete 属性)。

禁用自动填充

要禁用表单中的自动填充,您可以将 `autocomplete` 属性设置为 "off"

autocomplete="off"

您可以为整个表单设置,也可以为表单中的特定输入元素设置。

html
<form method="post" action="/form" autocomplete="off">
  …
</form>
html
<form method="post" action="/form">
  …
  <div>
    <label for="cc">Credit card:</label>
    <input type="text" id="cc" name="cc" autocomplete="off" />
  </div>
</form>

为字段设置 autocomplete="off" 会产生两个效果:

  • 它告诉浏览器不要保存用户输入的数据以供以后在类似表单中自动填充(某些浏览器会为特殊情况提供例外,例如提示用户保存密码)。
  • 它会阻止浏览器在会话历史中缓存表单数据。当表单数据缓存到会话历史中时,如果用户提交了表单并点击了“后退”按钮返回到原始表单页面,则会显示用户填入的信息。

如果浏览器在设置 autocomplete 为 off 后仍然提供建议,那么您需要更改 `<input>` 元素的 name 属性。

管理登录字段的自动填充

现代浏览器实现了集成的密码管理功能:当用户为网站输入用户名和密码时,浏览器会提供保存的选项。当用户再次访问该网站时,浏览器会使用保存的值自动填充登录字段。

此外,浏览器还允许用户选择一个主密码,浏览器将使用该主密码来加密已保存的登录详细信息。

即使没有主密码,浏览器内置的密码管理通常也被视为对安全性的整体提升。由于用户不必记住浏览器为他们存储的密码,因此他们可以选择比平时更强的密码。

因此,许多现代浏览器不支持为登录字段设置 autocomplete="off"

  • 如果一个网站在 `<form>` 元素上设置了 autocomplete="off",并且该表单包含用户名和密码输入字段,浏览器仍会提供保存登录信息的选项。如果用户同意,下次用户访问该页面时,浏览器将自动填充这些字段。
  • 如果一个网站为用户名和密码 `<input>` 字段设置了 autocomplete="off",浏览器仍会提供保存登录信息的选项。如果用户同意,下次用户访问该页面时,浏览器将自动填充这些字段。

如果您正在创建一个用户管理页面,其中用户可以为其他人指定新密码,并且因此希望防止密码字段被自动填充,您可以使用 autocomplete="new-password"

此属性是对浏览器的提示;某些浏览器可能不遵守此设置。