自動填入

在第 10 次中，您必須重新輸入地址，瀏覽器 開發人員可藉此加快輸入資料的速度，避免重新輸入資料。 本單元將說明自動填入功能的運作方式，以及 autocomplete 和其他方面的運作方式 元素屬性可確保瀏覽器提供適當的自動填入選項。

自動填入功能如何運作？

您已在自動填入簡介中，瞭解 自動填入。不過，瀏覽器為什麼提供自動填入功能？

填寫表單不是有趣的活動，但你仍須完成 經常更新。您已填寫多份表單，且通常會填寫相同的資料。 如要協助使用者加快表單填寫速度，其中一個方法就是提供使用者選擇 自動將先前輸入的資料填入表單欄位。這是自動填入功能。

瀏覽器如何得知要自動填入哪些資料？查看範例表單 ] 欄位加以確認。

<label for="name">Name</label>
<input name="name" id="name">

如果您提交這個表單欄位，瀏覽器會儲存值 (您輸入的資料) 以及 name 屬性的值 (name)。有些瀏覽器也會考量 id 屬性 (用於儲存及填入資料)。

假設幾週後，您在另一個網站上填寫了其他表單。也在這個網站 包含表單欄位，其中含有 name="name"。你的瀏覽器現在可以提供自動填入功能 因為 name 值已經儲存。

注意：請使用 :autofill CSS 虛擬類別，為瀏覽器自動填入的表單控制項設定樣式。為獲得最佳瀏覽器相容性，請使用 :autofill 和前置字串 :-webkit-autofill。

自動填入功能在常用的表單內 (例如註冊 登入、付款、結帳，以及輸入姓名或 讓我們看看 DNS 解析 進一步探索內部和外部位址

您可以使用適當的 autocomplete 屬性的值。autocomplete 的值有很多種。以下是地址的範例。

您的瀏覽器是否已為您儲存地址？太好了！之後 與地址表單的第一個欄位互動時，瀏覽器會顯示一份清單 。您可以選擇其中一項，瀏覽器會自動填入所有欄位 與特定地址相關的資訊自動填入功能讓表單填寫過程快速又簡單。

並非所有地址表單都有相同的欄位，且欄位的順序也不盡相同。 為 autocomplete 使用正確的值，可確保瀏覽器填入資訊 正確的表單值有 country、postal-code、 和許多 瞭解詳情。

注意： 您可以為 autocomplete 定義多個以空格分隔的值，假設您有一份包含運送地址的表單，以及另一個帳單地址表單。如要向瀏覽器指出帳單地址的郵遞區號，您可以使用 autocomplete="billing postal-code"。如果是運送地址，第一個值請使用 shipping。

確保使用者可以快速登入，並使用安全的密碼

許多人不擅長記住密碼。最常見的 密碼是 「123456」，後面加上其他易於記住的組合。運用方式 安全又獨特的密碼，卻無法牢記嗎？

瀏覽器內建密碼管理工具，可產生、儲存及填入密碼 而非密碼瞭解如何協助瀏覽器自動填入電子郵件 以及管理密碼

您可以使用 autocomplete="email" 做為電子郵件欄位，讓使用者取得自動填入功能 代表電子郵件地址

由於這是註冊表單，因此使用者不應看到先前填寫內容的選項 或密碼您可以使用 autocomplete="new-password" 確保瀏覽器 提供產生新密碼的選項。

注意： 如要確保註冊表單安全無虞，建議您使用第三方識別資訊提供者，而不要自行建立驗證系統。

在登入表單中，您可以使用 autocomplete="current-password" 提供下列資訊 瀏覽器可以讓您選擇是否要填入先前儲存的密碼 網站。

您可以為許多網站設定雙重驗證功能。除了 密碼、動態驗證碼會透過簡訊或雙重驗證應用程式傳送。

如果系統提供簡訊中的驗證碼，那就太棒了 即可直接選取該鍵盤來填入 值呢？在 Safari 14 以上版本中，你可以透過 autocomplete="one-time-code"敬上 。在 Android 版 Chrome 中，您可以使用 WebOTP API 實現 這應該和 JavaScript 有關

進一步瞭解如何使用簡訊動態密碼表單驗證網頁電話號碼 最佳做法

注意：簡訊可能會回收並盜用，因此簡訊本身不是最安全的驗證方式。考慮使用其他雙重驗證方法或多重驗證。進一步瞭解多重驗證。

協助使用者填寫信用卡資訊

你可以在許多電子商務網站上使用信用卡購買商品。 網站可以使用自行提供表單的第三方付款平台，前提是 你必須先建立自己的付款方式 確保使用者能輕鬆填妥你的資訊 付款資訊。

您可以再次使用 autocomplete 屬性，確保瀏覽器提供 正確的自動填入選項

信用卡有 cc-number 的數值，信用卡到期 日期 cc-exp，和所有其他資訊 需求 信用卡付款。

使用單一輸入號碼輸入信用卡號碼，例如信用卡號碼和電話號碼 ，以確保瀏覽器提供自動填入功能。請使用標準表單元素， 例如將付款卡日期的 <select> (而非自訂元素) 設為 確保自動完成功能可供使用

進一步瞭解如何協助使用者不必重新輸入付款 資料。

確保自動填入功能適用於所有欄位

除了地址、帳戶資訊和信用卡資訊以外， 瀏覽器可透過自動填入功能為使用者提供更多欄位。

在表單中加入電話欄位時，您是否可以使用任一 可購買 價值 自動完成功能。已為表單欄位找到合適的值嗎？新增資料。

為 autocomplete 屬性使用合適的值有助於瀏覽器提供 可以幫助使用者更快填寫表單。

協助瀏覽器瞭解不應自動填入欄位

你已瞭解自動填入功能的運作方式、如何協助瀏覽器使用自動填入功能，以及這麼做的原因 自動填入功能可讓使用者輕鬆填寫表單。有時您 因為您不希望瀏覽器提供自動填入功能。

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

自動填入功能沒幫助的地方 就是輸入一次性的專屬值 例如一次性代碼欄位每次這個值都不同，且 瀏覽器不應儲存值或提供自動填入選項。別擔心！您可以使用 autocomplete="off" 適用於這類欄位，以防止自動填入。

注意： 自動填入和自動完成功能可以為無障礙功能帶來助益。有了自動填入功能，使用者就不必記住資訊，也不必手動重新輸入資料。詳情請參閱 W3C 無障礙規範

autocomplete="off" 的另一個用途是 Honeypot 欄位 (請參閱先前 模組)。雖然這個欄位 顯示，瀏覽器可能會自動填入資訊以及其他欄位。正在啟用自動填入功能 關閉後，使用者就不會因為輸入 自動完成作業

注意： 您已經瞭解使用不重複且安全的密碼非常重要。瀏覽器內建的密碼管理工具可強制使用高強度密碼，因此，即使已使用 autocomplete="off"，瀏覽器仍會提供密碼的自動填入選項，以便讓這些密碼管理工具執行工作。進一步瞭解自動完成屬性和登入欄位。

除非您確定自動填入功能可協助使用者，再停用自動填入功能。

隨堂測驗

測試你對自動填入功能的瞭解程度

你該在註冊表單的密碼欄位輸入哪個自動完成值？

autocomplete="password"

請再試一次！

autocomplete="off"

請再試一次！

autocomplete="new-password"

🎉

autocomplete="current-password"

請再試一次！

資源

• 自動完成功能 屬性。
  • 付款和地址表單最好 做法