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:username@example.net”。

其他令牌

當表單欄位不是電話號碼、電子郵件地址或即時通訊協議時,空格分隔的令牌列表前面不帶聯絡型別

"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 表格僅在瀏覽器中載入

另請參閱