HTML 属性:autocomplete

HTML autocomplete 属性允许 Web 开发者指定 user agent 必须提供什么权限才能在填写表单字段值时提供自动帮助,以及向浏览器提供有关字段中预期信息类型的指导。

¥The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

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

¥It is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements.

Try it

描述

¥Description

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

¥The autocomplete attribute provides a hint to the user agent specifying how to, or indeed whether to, prefill a form control. The attribute value is either the keyword off or on, or an ordered list of space-separated tokens.

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>

¥If an <input>, <select> or <textarea> element has no autocomplete attribute, the browser will use the autocomplete attribute of the element's owning form. The owning form is either the <form> matching the id specified by the form attribute of the element (if present) or, more commonly, the <form> the element is nested in.

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

¥Note: In order to provide autocompletion, user-agents might require <input>/<select>/<textarea> elements to:

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

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

¥If the same list of tokens is used in more than one form control, the user-agent will autocomplete all occurrences of the same autocomplete value with the same data value.

某些令牌可能会多次使用,并且具有可能不同的预期值,例如包含送货地址和账单地址的表单中的 zip-code 令牌。在空格分隔的列表中包含多个不同的标记会导致关联的表单控件被赋予唯一的自动补齐值:在本例中为 autocomplete="shipping zip-code"autocomplete="billing zip-code"

¥Some tokens may be used more than once with potentially different expected values, such as the zip-code token in a form that contains both shipping and billing addresses. Including multiple different tokens in a space-separated list causes the associated form controls to be given unique autocomplete values: in this case, autocomplete="shipping zip-code" and autocomplete="billing zip-code".

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

¥Some autocomplete values may need to be re-used multiple times. For example, a form may contain multiple shipping addresses and therefore multiple occurrences of "shipping zip-code" while still expecting different values. To make the autocomplete value unique in these cases, the first token in the space-separated list of tokens can be a section-* token, where the token's first eight characters are always the string "section-", followed by an alphanumeric string. All form fields given the section-* token with the same alphanumeric string belong to the same named group.

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

¥If including the autocomplete attribute on hidden input elements (<input type="hidden">), its value must be an ordered list of space-separated tokens; the on and off keywords are not allowed.

建议值的来源通常由浏览器决定;通常,值来自用户输入的过去值,但它们也可能来自预先配置的值。例如,浏览器可能允许用户保存他们的名称、地址、调用号码和电子邮件地址以用于自动补齐目的。浏览器还可以提供保存加密信用卡信息的功能,以便在身份验证过程之后自动补齐。

¥The source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. For instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. The browser may also offer the ability to save encrypted credit card information, for autocompletion following an authentication procedure.

¥Values

属性值可以是关键字 offon,也可以是空格分隔的 <token-list>,用于描述自动补齐值的含义。

¥The attribute value is either the keyword off or on, or a space-separated <token-list> that describes the meaning of the autocompletion value.

off

浏览器不允许自动输入或选择该字段的值。文档或应用可能提供其自己的自动补齐功能,或者出于安全考虑要求不自动输入字段的值。

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

¥Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.

on

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

<token-list>

一组有序的空格分隔标记,由自动填充详细信息标记组成。详细标记包括:

"section-*"

定义一组表单控件的名称。前八个字符是字符串 "部分-" 的标记,不区分大小写,后跟其他字符。如果存在,则此标记必须是空格分隔的标记列表中的第一个标记。所有以相同标记开头的表单控件都属于命名组。

"name"

该字段期望该值是一个人的全名。通常首选使用“name”而不是将名称分解为各个组成部分,因为这样可以避免处理人名的广泛多样性及其结构;但是,如果你确实需要将名称分解为各个组成部分,则可以使用以下 autocomplete 值:

"honorific-prefix"

前缀或标题,例如 "太太。"、"先生。"、"遗漏"、"多发性硬化症。"、"博士。" 或 "女士。"。

"given-name"

给定的(或 "first")名称。

"additional-name"

中间名。

"family-name"

姓氏(或 "last")。

"honorific-suffix"

后缀,例如 "小。"、"理学学士"、"博士。"、"MBASW" 或 "IV"。

"nickname"

昵称或句柄。

"email"

电子邮件地址。

"username"

用户名或账户名。

"new-password"

新密码。创建新账户或更改密码时,应将其用于 "输入你的新密码" 或 "确认新密码" 字段,而不是可能存在的常规 "输入当前密码" 字段。浏览器可以使用它来避免意外填写现有密码并为创建安全密码提供帮助(另请参阅 使用 autocomplete="new-password" 防止自动填充)。

"current-password"

用户当前的密码。

"one-time-code"

用于验证用户身份的一次性密码 (OTP),用作登录流程中的附加因素。最常见的是,这是通过某种渠道外机制(例如短信、电子邮件或身份验证器应用)接收的代码。

"organization-title"

职务或个人在组织内的头衔,例如 "高级技术撰稿人"、"总统" 或 "副队长"。

"organization"

公司或组织名称,例如 "Acme Widget 公司" 或 "美国女童子军"。

"street-address"

街道地址。这可以是多行文本,并且应完全标识地址在其第二个行政级别(通常是城市或城镇)内的位置,但不应包括城市名称、邮政编码或国家/地区名称。

"shipping"

发送产品的街道地址。这可以与其他标记结合使用,例如“shipping street-address”和“shipping address-level2”。

"billing"

与所使用的付款方式关联的街道地址。这可以与其他标记结合使用,例如“billing street-address”和“billing address-level2”。

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

支付工具的类型(例如 "签证" 或 "万事达卡")。

"transaction-currency"

进行交易所使用的货币。

"transaction-amount"

付款表单的交易金额,以“transaction-currency”指定的货币给出。

"language"

首选语言,作为有效的 BCP 47 语言标签 给出。

"bday"

出生日期,作为完整日期。

"bday-day"

出生日期所在月份的某天。

"bday-month"

出生日期所在年份的月份。

"bday-year"

出生日期的年份。

"sex"

性别标识(例如 "女性"、"法阿法芬"、"海吉拉"、"男性"、"非二元"),作为不带换行符的自由格式文本。

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

调用号码中的调用分机代码,例如酒店的房间或套房号码或公司的办公室分机号。

"impp"

即时消息协议端点的 URL,例如“xmpp:username@example.net”。

"url"

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

"photo"

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

"webauthn"

根据条件 navigator.credentials.get() 调用(即包含 mediation: 'conditional' 的调用)的请求,由 网页认证 API 生成的万能密钥。详细信息请参见 通过表单自动填充使用密钥登录

请参阅 WHATWG 标准 了解更多详细信息。

¥See the WHATWG Standard for more detailed information.

注意:autocomplete 属性还控制 Firefox 是否会(与其他浏览器不同)跨页面加载 <input> 元素、<textarea> 元素或整个 <form>保留动态禁用状态和(如果适用)动态检查。默认情况下启用持久性功能。将 autocomplete 属性的值设置为 off 将禁用此功能。即使 autocomplete 属性通常因其 type 而不适用,该方法也能发挥作用。参见 火狐错误 654072

¥Note: The autocomplete attribute also controls whether Firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> element, <textarea> element, or entire <form> across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature. This works even when the autocomplete attribute would normally not apply by virtue of its type. See Firefox bug 654072.

示例

¥Examples

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

地址中的管理级别

¥Administrative levels in addresses

四个行政级别字段(address-level1address-level4)按照地址所在国家/地区内不断增加的精确度来描述地址。每个国家都有自己的行政级别制度,并且在书写地址时可能会按照不同的顺序排列级别。

¥The four administrative level fields (address-level1 through address-level4) describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.

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

¥address-level1 always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.

表单布局灵活性

¥Form layout flexibility

鉴于不同的国家/地区以不同的方式书写地址,每个字段位于地址中的不同位置,甚至完全不同的字段集和数量,如果可能的话,你的网站能够切换到预期的布局会很有帮助 由你的用户在提交地址输入表单时根据地址所在的国家/地区进行填写。

¥Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.

变化

¥Variations

每个行政级别的使用方式因国家/地区而异。下面是一些例子;这并不是一份详尽的清单。

¥The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.

美国

¥United States

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

¥A typical home address within the United States looks like this:

432 任何地方 St 示例维尔 CA 95555

¥432 Anywhere St Exampleville CA 95555

在美国,地址中最不具体的部分是州,在本例中为 "CA"(美国邮政局对 "加利福尼亚州" 的官方简写)。因此 address-level1 是状态,在本例中是 "CA"。

¥In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus address-level1 is the state, or "CA" in this case.

地址的第二个最不具体的部分是城市或城镇名称,因此在此示例地址中 address-level2 是 "塞克维尔"。

¥The second-least specific portion of the address is the city or town name, so address-level2 is "Exampleville" in this example address.

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

¥United States addresses do not use levels 3 and up.

英国

¥United Kingdom

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

¥Address input forms in the UK should contain one address level and one, two or three address lines, depending on the address. A complete address would look like so:

103 Frogmarch 街上瓦平温切尔西 TN99 8ZZ

¥103 Frogmarch Street Upper-Wapping Winchelsea TN99 8ZZ

地址级别为:

¥The address levels are:

  • address-level1:邮局城镇 — 本例中为 "温切尔西"。
  • address-line2:在本例中,地点为 "上瓦平"。
  • address-line1:房屋/街道详情 — "弗罗格马奇街 103 号"。

邮政编码是分开的。请注意,实际上你可以仅使用邮政编码和 address-line1 来成功在英国投递邮件,因此它们应该是唯一的必填项目,但通常人们倾向于提供更多详细信息。

¥The postcode is separate. Note that you can actually use just the postcode and address-line1 to successfully deliver mail in the UK, so they should be the only mandatory items, but usually people tend to provide more details.

中国

¥China

中国最多可以使用三个行政级别:省、市、区。

¥China can use as many as three administrative levels: the province, the city, and the district.

并不总是需要 6 位数的邮政编码,但在提供时,为了清楚起见,将其与标签分开放置。例如:

¥The 6 digit postal code is not always needed but when supplied it is placed separately with a label for clarity. For example:

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

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

日本

¥Japan

日本的地址通常写成一行,按照从最不具体到更具体的部分的顺序(与美国的顺序相反)。一个地址有两到三个管理级别。附加行可用于显示架构物名称和房间号。邮政编码是单独的。例如:

¥An address in Japan is typically written in one line, in an order from the least-specific to more-specific portions (in reverse order to the United States). There are two or three administrative levels in an address. Additional line can be used to show building names and room numbers. The postal code is separate. For example:

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

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

"〒" 及其后七位数字表示邮政编码。

¥"〒" and following seven digits shows the postal code.

address-level1 用于都道府县或东京都;"長野県"(长野县)就是这种情况。address-level2 通常用于市、县、镇、村;本例中为 "長野市"(长野市)。"某町 123" 是 address-line1,由区域名称和批号组成。

¥address-level1 is used for prefectures or the Tokyo Metropolis; "長野県" (Nagano Prefecture) is in this case. address-level2 is typically used for cities, counties, towns and villages; "長野市" (Nagano City) in this case. "某町 123" is address-line1 which consists of an area name and a lot number.

规范

Specification
HTML Standard
# attr-fe-autocomplete

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also