第十次，就必須重新輸入地址，瀏覽器和開發人員可協助使用者更快輸入資料，避免重新輸入資料。本單元說明自動填入功能的運作方式，以及如何使用 autocomplete 和其他元素屬性，確保瀏覽器提供適當的自動填入選項。
自動填入功能如何運作？
在「自動填入簡介」中，您已瞭解自動填入的基本概念。但瀏覽器為何提供自動填入功能？
填寫表單並不是好事，但還是常事。一段時間過後，您經常填寫的表單很多，也經常會填入同樣的資料。 如要加快表單填寫速度，您可以提供選項，讓使用者選擇自動使用先前輸入的資料填寫表單。自動填入。
瀏覽器如何知道要自動填入哪些資料？請查看表單欄位範例來找出答案
<label for="name">Name</label>
<input name="name" id="name">
如果提交這個表單欄位，瀏覽器會儲存這個值 (您輸入的資料) 和 name 屬性的值 (名稱)。部分瀏覽器在儲存及填入資料時，也會查看 id 屬性。
假設幾週後您在其他網站填寫了另一份表單，這個網站也包含具有 name="name" 的表單欄位。由於已儲存名稱值，因此瀏覽器現在可以提供自動填入功能。
自動填入功能特別適用於常用的表單，例如註冊和登入、付款、結帳，以及需要輸入姓名或地址的表單。
您可以為 autocomplete 屬性使用適當的值，協助瀏覽器提供最合適的自動填入選項。「autocomplete」的值很多，以下提供地址範例。
瀏覽器是否已為您儲存地址？太好了！與地址表單中的第一個欄位互動後，瀏覽器會顯示已儲存的地址清單。您可以選擇其中一個選項，瀏覽器就會填入與該位址相關的所有欄位。自動填入功能可協助您輕鬆快速地填寫表單。
並非所有地址表單都有相同的欄位，欄位順序也不盡相同。
使用正確的 autocomplete 值可確保瀏覽器填入表單的正確值。有 country、postal-code 和許多的值。
確保使用者能快速登入並使用安全密碼
很多人都不擅長記住密碼。最常見的密碼是「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"，避免自動填入。
autocomplete="off" 的另一個用途是 Honeypot 欄位 (請參閱上一個模組)。即使看不到這個欄位，瀏覽器仍可能將其他欄位自動填入。關閉自動填入功能可確保系統不會將真實使用者辨識為機器人，因為系統會自動填妥這個欄位。
請在確定自動填入功能對使用者有幫助的情況下，再停用該功能。
隨堂測驗
測驗您對自動填入功能的相關知識
請問註冊表單的密碼欄位應使用哪種自動完成值？
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"