HTML 属性：autocomplete

试一试

<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" type="text" autocomplete="given-name" />

<label for="lastName">Last Name:</label>
<input name="lastName" id="lastName" type="text" autocomplete="family-name" />

<label for="email">Email:</label>
<input name="email" id="email" type="email" autocomplete="off" />

label {
  display: block;
  margin-top: 1rem;
}

描述

autocomplete 属性向用户代理提供了一个提示，指明如何预填充表单控件，以及是否预填充。属性值可以是关键字 off 或 on，或者是由空格分隔的有序标记列表。

<input autocomplete="off" />
<input autocomplete="on" />
<input autocomplete="shipping street-address" />
<input autocomplete="section-user1 billing postal-code" />

如果 <input>、<select> 或 <textarea> 元素没有 autocomplete 属性，浏览器将使用该元素所属表单的 autocomplete 属性。所属表单要么是与元素 form 属性（如果存在）指定的 id 匹配的 <form>，要么更常见的是该元素嵌套在其中的 <form>。

如果同一个标记列表在多个表单控件中使用，用户代理将使用相同的数据值自动填充所有相同 autocomplete 值的出现。

某些标记可能会多次使用，并具有潜在不同的预期值，例如在包含送货地址和账单地址的表单中的 zip-code 标记。在空格分隔列表中包含多个不同的标记会导致关联的表单控件被赋予唯一的自动填充值：在这种情况下，autocomplete="shipping zip-code" 和 autocomplete="billing zip-code"。

某些自动填充值可能需要多次重用。例如，一个表单可能包含多个送货地址，因此多次出现 "shipping zip-code"，但仍然期望不同的值。为了在这些情况下使自动填充值唯一，空格分隔标记列表中的第一个标记可以是 section-* 标记，其中标记的前八个字符始终是字符串 "section-"，后跟一个字母数字字符串。所有被赋予具有相同字母数字字符串的 section-* 标记的表单字段都属于同一个命名组。

如果将 autocomplete 属性包含在隐藏输入元素 (<input type="hidden">) 上，其值必须是由空格分隔的有序标记列表；不允许使用 on 和 off 关键字。

建议值的来源通常由浏览器决定；通常，值来自用户过去输入的值，但也可能来自预配置的值。例如，浏览器可能允许用户保存其姓名、地址、电话号码和电子邮件地址以用于自动填充目的。浏览器还可能提供保存加密信用卡信息的功能，以便在身份验证过程后进行自动填充。

值

属性值是关键字 off 或 on，或者是描述自动填充值含义的空格分隔的 <token-list>。

关闭

浏览器不允许自动输入或选择此字段的值。文档或应用程序可能会提供自己的自动填充功能，或者出于安全考虑，字段值不允许自动输入。

注意：在大多数现代浏览器中，将 autocomplete 设置为 "off" 并不会阻止密码管理器询问用户是否要保存用户名和密码信息，也不会阻止其在网站登录表单中自动填充这些值。请参阅管理登录字段的自动填充。

启用

浏览器允许自动完成输入。不提供有关字段中预期数据类型的指导，因此浏览器可以使用自己的判断。

<token-list>

一组有序的空格分隔标记，由自动填充详细信息标记组成，前面可选地带有分区标记以及账单或发货分组标记。电话号码、电子邮件地址和消息协议标记前面带有标识收件人类型的标记。

有关更详细的信息，请参阅WHATWG 标准。

标记列表标记

<token-list> 选项包括（按顺序）：

1. 组命名标记
2. 分组标识符
3. 详细信息标记
4. Web 授权

命名组

要创建表单字段的命名组，可以使用可选的 section-* 标记。如果存在，此标记必须是空格分隔标记列表中的第一个标记。

section-*

定义表单控件组的名称。一个标记，其前八个字符是字符串 "section-"（不区分大小写），后跟附加字符。所有以相同标记开头的表单控件都属于该命名组。

分组标识符

一个可选的 shipping 或 billing 分组标识符

shipping

由后续标记标识的字段是送货地址或联系信息的一部分

billing

由后续标记标识的字段是账单地址或联系信息的一部分

详细信息标记

每个空格分隔的详细信息标记列表包括一个带有数字联系信息的收件人类型（按此顺序），或者一个由其他标记组成的空格分隔标记列表。

收件人类型

标识收件人类型的标记包括

home

由后续标记标识的联系类型用于在收件人住所联系。

work

由后续标记标识的联系类型用于在收件人工作场所联系。

mobile

由后续标记标识的联系类型用于无论身在何处联系收件人。

fax

由后续标记标识的收件人用于传真机。

page

由后续标记标识的收件人用于寻呼机或呼叫器。

数字联系标记

用于电话号码或号码组件、电话分机、电子邮件地址或即时通讯协议的标记或标记组。

电话

一个完整的电话号码，包括国家代码。如果您需要将电话号码分解为各个部分，您可以将这些值用于这些字段

tel-country-code

国家代码，例如美国、加拿大以及北美洲和加勒比部分地区的“1”。

tel-national

不带国家代码部分的整个电话号码，包括国内前缀。对于电话号码“1-855-555-6502”，此字段的值将是“855-555-6502”。

tel-area-code

区号，如果适用，带有任何国内前缀。

tel-local

不带国家或区号的电话号码。这可以进一步分为两部分，对于具有交换机号码和交换机内号码的电话号码。对于电话号码“555-6502”，将 tel-local-prefix 用于“555”，将 tel-local-suffix 用于“6502”。

tel-extension

电话号码中的电话分机代码，例如酒店的房间或套房号码，或公司的办公室分机号码。

电子邮件

一个电子邮件地址。

impp

即时通讯协议端点的 URL，例如 xmpp:username@example.net。

其他标记

当表单字段不是电话号码、电子邮件地址或即时通讯协议时，空格分隔的标记列表前面不带联系类型

name

该字段期望的值是人的全名。通常，使用 name 而不是将姓名分解为各个部分是首选的，因为这避免了处理人类姓名及其结构的多样性；但是，如果您确实需要将姓名分解为各个部分，可以使用以下 autocomplete 值

honorific-prefix

前缀或称谓，例如“Mrs.”、“Mr.”、“Miss”、“Ms.”、“Dr.”或“Mlle.”。

given-name

给定名（或“名”）。

additional-name

中间名。

family-name

姓氏（或“姓”）。

honorific-suffix

后缀，例如“Jr.”、“B.Sc.”、“PhD.”、“MBASW”或“IV”。

nickname

昵称或句柄。

username

用户名或账户名。

new-password

新密码。在创建新账户或更改密码时，这应用于“输入您的新密码”或“确认新密码”字段，而不是可能存在的通用“输入您的当前密码”字段。浏览器可以使用此功能来避免意外填充现有密码，并提供创建安全密码的帮助。

current-password

用户的当前密码。

one-time-code

用于验证用户身份的一次性密码 (OTP)，作为登录流程中的附加因素。通常，这是通过某种带外机制（例如短信、电子邮件或身份验证器应用程序）收到的代码。

organization-title

职称，或一个人在组织中的头衔，例如“高级技术作家”、“总裁”或“助理部队领导”。

organization

公司或组织名称，例如“Acme Widget Company”或“Girl Scouts of America”。

street-address

街道地址。这可以是多行文本，应完全识别地址在其二级行政级别（通常是城市或城镇）内的位置，但不应包括城市名称、邮政编码或国家名称。

address-line1, address-line2, address-line3

街道地址的每一行。这些只应在 street-address 不存在时才存在。

address-level4

在具有四个行政级别的地址中，最细粒度的行政级别。

address-level3

在至少有三个行政级别的地址中，第三级行政级别。

address-level2

在至少有两级的地址中，第二级行政级别。在只有两级行政级别的国家/地区，这通常是地址所在的城市、城镇、村庄或其他地点。

address-level1

地址中的第一级行政级别。这通常是地址所在的省份。在美国，这将是州。在瑞士，是州。在英国，是郡。

country

国家或地区代码。

country-name

国家或地区名称。

postal-code

邮政编码（在美国，这是 ZIP 代码）。

cc-name

如信用卡等支付工具上打印的或与之关联的全名。通常，优先使用全名字段，而不是将姓名分解为各个部分。

cc-given-name

支付工具（如信用卡）上显示的给定名（名）。

cc-additional-name

支付工具或信用卡上显示的中间名。

cc-family-name

信用卡上显示的姓氏。

cc-number

信用卡号码或其他识别支付方式的号码，例如帐号。

cc-exp

支付方式有效期，通常格式为“MM/YY”或“MM/YYYY”。

cc-exp-month

支付方式到期的月份。

cc-exp-year

支付方式到期的年份。

cc-csc

支付工具的安全码；在信用卡上，这是卡背面的 3 位验证码。

cc-type

支付工具类型（例如“Visa”或“Master Card”）。

transaction-currency

交易将使用的货币。

transaction-amount

对于支付表单，交易金额，以 transaction-currency 指定的货币表示。

language

首选语言，以有效的 BCP 47 语言标签表示。

bday

生日，作为完整日期。

bday-day

生日的日期。

bday-month

生日的月份。

bday-year

生日的年份。

sex

性别身份（例如“Female”、“Fa'afafine”、“Hijra”、“Male”、“Nonbinary”），作为不带换行符的自由格式文本。

url

URL，例如主页或公司网站地址，具体取决于表单中其他字段的上下文。

photo

表示表单中其他字段中给出的个人、公司或联系信息的图像 URL。

Web 授权令牌

对于 <input> 和 <textarea>，可以在最后包含 webauthn 令牌，以指示用户在与控件交互时显示公钥凭据。

webauthn

通过 Web Authentication API 生成的通行密钥，由有条件的 navigator.credentials.get() 调用请求（即，包含 mediation: 'conditional' 的调用）。如果包含，这是空格分隔令牌列表中的最后一个令牌。有关更多详细信息，请参阅 通过表单自动填充使用通行密钥登录。

示例

<div>
  <label for="cc-number">Enter your credit card number</label>
  <input name="cc-number" id="cc-number" autocomplete="off" />
</div>

地址中的行政级别

四个行政级别字段（address-level1 到 address-level4）描述了地址在其所在国家/地区内以递增的精确度级别。每个国家/地区都有自己的行政级别系统，并且在书写地址时可能会以不同的顺序排列这些级别。

address-level1 始终表示最广泛的行政划分；它是地址中除国家名称外最不具体的部分。

表单布局灵活性

鉴于不同国家/地区的地址书写方式不同，每个字段在地址中的位置也不同，甚至字段集和数量也完全不同，因此，如果可能，您的网站能够在呈现地址输入表单时，根据地址所在的国家/地区，切换到用户期望的布局，这会很有帮助。

变体

每个行政级别的用法因国家/地区而异。以下是一些示例；这并非详尽列表。

美国

美国典型的家庭住址如下所示

432 Anywhere St Exampleville CA 95555

在美国，地址中最不具体的部分是州，在本例中是“CA”（美国邮政总局对“加利福尼亚”的官方简称）。因此 address-level1 是州，或本例中的“CA”。

地址中第二不具体的部分是城市或城镇名称，因此本示例地址中 address-level2 是“Exampleville”。

美国地址不使用 3 级及以上级别。

英国

英国的地址输入表单应包含一到两级地址级别和一、两或三行地址，具体取决于地址。完整的地址如下所示

103 Frogmarch Street Upper-Wapping Winchelsea Whereshire TN99 8ZZ

地址级别为

• address-level1：郡——本例中为“Whereshire”。
• address-level2：邮政城镇——本例中为“Winchelsea”。
• address-line2：地点——本例中为“Upper-Wapping”。
• address-line1：房屋/街道详细信息——“103 Frogmarch Street”。

邮政编码是单独的。请注意，在英国，您实际上只需使用邮政编码和 address-line1 即可成功投递邮件，因此它们应该是唯一强制性的项目，但人们通常倾向于提供更多详细信息。

中国

中国最多可使用三级行政级别：省、市和区。

6 位邮政编码并非总是必需的，但提供时会单独放置并带有标签以明确。例如

北京市东城区建国门北大街 8 号华润大厦 17 层 1708 单元 邮编：100005

日本

日本的地址通常写在一行中，顺序从最不具体到更具体的部分（与美国相反）。地址中有两到三个行政级别。可以使用附加行来显示建筑物名称和房间号。邮政编码是单独的。例如

〒 381-0000 長野県長野市某町 123

“〒”和随后的七位数字表示邮政编码。

address-level1 用于都道府县或东京，本例中为“長野県”（长野县）。address-level2 通常用于城市、县、町和村，本例中为“長野市”（长野市）。“某町 123”是 address-line1，由区域名称和地号组成。

规范

浏览器兼容性

html.elements.form.autocomplete

html.elements.input.autocomplete

html.elements.select.autocomplete

html.elements.textarea.autocomplete

另见

• <input> 元素
• <select> 元素
• <textarea> 元素
• <form> 元素
• HTML 表单
• 所有全局属性