第十次重新輸入地址實在很累。瀏覽器和開發人員可以協助使用者更快輸入資料，避免重複輸入。本單元將說明自動填入的運作方式，以及如何使用 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 達成此目的。
進一步瞭解如何使用 SMS OTP 表單最佳做法，在網路上驗證電話號碼。
注意：簡訊本身並非最安全的驗證方法，因為電話號碼可能會回收再利用，也可能遭到盜用。建議改用其他雙重驗證方法或多重驗證。
協助使用者填寫信用卡資訊
在許多電子商務網站上，你都可以使用信用卡購買產品。 網站可能會使用提供自有表單的第三方付款平台，但如果您需要自行建構付款表單，請確保使用者能輕鬆填寫付款資訊。
您可以再次使用 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" 的另一個用途是蜜罐欄位 (請參閱上一個單元)。即使該欄位並未顯示，瀏覽器仍可能會自動填入該欄位，以及其他欄位。關閉自動填入功能可確保系統不會因為欄位自動填入內容，而將真人使用者誤判為機器人。
請務必確認停用自動填入功能有助於使用者，再進行這項操作。
隨堂測驗
測試你對自動填入功能的瞭解程度
註冊表單的密碼欄位應使用哪個自動完成值？
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"