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 表單
• 所有全域性屬性