HTML 属性:autocomplete

HTML 的 autocomplete 属性允许 Web 开发人员指定用户代理是否可以提供自动填充表单字段值的帮助,以及向浏览器提供有关该字段中预期信息的类型的指导。

它适用于接受文本或数字值作为输入的 <input> 元素、<textarea> 元素、<select> 元素和 <form> 元素。

试一试

描述

autocomplete 属性提供了一个提示给用户代理,指定如何(或者是否)预填充表单控件。属性值可以是关键字 offon,或者是一个空格分隔的标记的有序列表。

html
<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>

注意:为了提供自动完成功能,用户代理可能需要 <input>/<select>/<textarea> 元素:

  1. 具有 name 和/或 id 属性
  2. <form> 元素的后代
  3. 由具有 提交 按钮的表单拥有

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

某些标记可能在多个地方使用,但预期值可能不同,例如包含送货地址和账单地址的表单中的 zip-code 标记。在空格分隔的列表中包含多个不同的标记会导致关联的表单控件获得唯一的自动填充值:在本例中,autocomplete="shipping zip-code"autocomplete="billing zip-code"

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

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

建议值的来源通常取决于浏览器;通常,值来自用户以前输入的值,但也可能来自预配置的值。例如,浏览器可能会让用户保存他们的姓名、地址、电话号码和电子邮件地址以供自动填充使用。浏览器还可以提供保存加密信用卡信息的功能,以便在身份验证过程后自动填充。

注意:autocomplete 属性还控制 Firefox(与其他浏览器不同)是否会在页面加载时保留 <input> 元素、<textarea> 元素或整个 <form> 的动态禁用状态和(如果适用)动态选中状态。此持久性功能默认启用。将 autocomplete 属性的值设置为 off 会禁用此功能。即使 autocomplete 属性通常由于其 type 而不适用,这也能正常工作。请参阅 Firefox 错误 654072

属性值可以是关键字 offon,或者是一个空格分隔的 <token-list>,用于描述自动填充值的含义。

off

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

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

on

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

<token-list>

一个由 空格分隔的标记 组成的有序集合,包括自动填充详细信息标记,前面可以选择性地添加分区标记以及账单或送货分组标记。电话号码、电子邮件地址和消息传递协议标记前面都有一个标记来标识收件人的类型。

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

令牌列表 tokens

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

  1. 组命名令牌
  2. 分组标识符
  3. 详细令牌
  4. Web 授权

命名组

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

"section-*"

定义表单控件组的名称。第一个八个字符为字符串“section-”(不区分大小写),后跟其他字符的令牌。所有以相同令牌开头的表单控件都属于命名组。

分组标识符

可选的 shippingbilling 分组标识符

"shipping"

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

"billing"

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

详细令牌

每个空格分隔的详细令牌列表都包含接收者类型和数字联系信息(按此顺序),或其他令牌的空格分隔的令牌列表。

接收者类型

标识接收者类型的令牌包括

"home"

后续令牌标识的联系类型用于联系接收者在其住所。

"work"

后续令牌标识的联系类型用于联系接收者在其工作场所。

"mobile"

后续令牌标识的联系类型用于联系接收者,无论其位置如何。

"fax"

后续令牌标识的接收者是传真机。

"page"

后续令牌标识的接收者是寻呼机或传呼机。

数字联系令牌

电话号码或号码的组成部分、电话分机号码、电子邮件地址或即时通讯协议的令牌或令牌组。

"tel"

完整的电话号码,包括国家代码。如果您需要将电话号码分解成其组成部分,您可以对这些字段使用这些值

"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"

电话号码内的电话分机号码,例如酒店的房间或套房号码或公司内的办公分机号码。

"email"

电子邮件地址。

"impp"

即时通讯协议端点的 URL,例如“xmpp:[email protected]”。

其他令牌

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

"name"

该字段期望值为人的全名。通常建议使用“name”而不是将姓名分解成其组成部分,因为它避免了处理人类姓名及其结构的广泛多样性;但是,如果您确实需要将姓名分解成其组成部分,可以使用以下 autocomplete

"honorific-prefix"

前缀或头衔,例如“女士”、“先生”、“小姐”、“女士”、“博士”或“小姐”。

"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”或“美国女童子军”。

"street-address"

街道地址。这可以是多行文本,应充分识别地址在其第二个管理级别(通常是城市或城镇)内的位置,但不应包含城市名称、邮政编码或国家名称。

"address-line1”、"address-line2”、"address-line3

街道地址的每一行。仅当不存在“street-address”时,这些才应存在。

"address-level4"

具有四个级别的地址中最细粒度的管理级别

"address-level3"

至少具有三个管理级别的地址的第三个管理级别

"address-level2"

至少有两个管理级别的地址的第二个管理级别。在有两个管理级别的国家/地区,这通常是地址所在的城市、城镇、村庄或其他地方。

"address-level1"

地址中的第一个管理级别。这通常是地址所在的省份。在美国,这将是州。在瑞士,是州。在英国,是邮政镇。

"country"

国家或地区代码。

"country-name"

国家或地区名称。

"postal-code"

邮政编码(在美国,这是邮政编码)。

"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"

性别认同(例如“女性”、“Fa'afafine”、“Hijra”、“男性”、“非二元性别”),作为不带换行符的自由格式文本。

"url"

URL,例如主页或公司网站地址,根据表单中其他字段的上下文而定。

"photo"

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

Web 授权令牌

使用<input><textarea>,可以最后包含 webauthn 令牌以指示用户代理在用户与控件交互时应显示公钥凭据。

"webauthn"

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

示例

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

地址中的管理级别

四个管理级别字段(address-level1address-level4)根据地址所在的国家/地区内越来越精确的级别来描述地址。每个国家/地区都有自己的管理级别系统,并且在书写地址时可能会以不同的顺序排列这些级别。

address-level1 始终表示最广泛的行政区域;它是除国家/地区名称之外地址中不太具体的组成部分。

表单布局灵活性

鉴于不同的国家/地区以不同的方式编写地址,每个字段在地址中的位置也不同,甚至完全不同的字段集和数量,因此,如果可能,您的网站能够在呈现地址输入表单时切换到用户期望的布局,这将非常有帮助,具体取决于地址所在的国家/地区。

变体

每个管理级别的使用方式因国家/地区而异。以下是一些示例;这并非详尽无遗的列表。

美国

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

432 Anywhere St Exampleville CA 95555

在美国,地址中不太具体的组成部分是州,在本例中为“CA”(美国邮政服务对“加利福尼亚州”的官方缩写)。因此,address-level1 是州,在本例中为“CA”。

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

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

英国

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

103 Frogmarch Street Upper-Wapping Winchelsea TN99 8ZZ

地址级别为

  • address-level1:邮政镇——在本例中为“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 标准
# attr-form-autocomplete
HTML 标准
# attr-fe-autocomplete

浏览器兼容性

html.elements.form.autocomplete

BCD 表格仅在浏览器中加载

html.elements.input.autocomplete

BCD 表格仅在浏览器中加载

html.elements.select.autocomplete

BCD 表格仅在浏览器中加载

html.elements.textarea.autocomplete

BCD 表格仅在浏览器中加载

另请参阅