使用跨平台瀏覽器功能，建構安全、無障礙且易於使用的登入表單。
如果使用者需要登入網站，登入表單的設計就非常重要。如果使用者連線不佳、使用行動裝置、趕時間或壓力大，這點尤其重要。設計不佳的登入表單會導致跳出率偏高。每次跳出都可能代表失去一位客戶和一位不滿的使用者，而不只是錯失登入機會。
導入方式
以下列出建構成功登入表單最重要的指南。
使用有意義且有效的 HTML
善用專為建立表單而設計的元素和屬性：
<form>、<input>、<label>和<button>type、autocomplete和inputmode
這些屬性可啟用內建瀏覽器功能、改善無障礙功能，並為標記增添意義。
使用 <label> 元素標示資料輸入表單欄位
如要為 <input>、<select> 或 <textarea> 加上標籤，請使用 <label>。將標籤的 for 屬性設為與輸入項目的 id 相同的值，即可將標籤與輸入項目建立關聯。
充分運用 HTML 屬性
使用適當的 <input> 元素 <type> 屬性，在行動裝置上提供正確的鍵盤，並啟用瀏覽器的基本內建驗證功能，讓使用者輕鬆輸入資料。
電子郵件地址一律使用 type="email"，電話號碼則一律使用 type="tel"。
每個 <input>、<select> 和 <textarea> 元素都應有適當的 autocomplete 屬性，以提升無障礙程度，並協助使用者避免重新輸入資料。
使用者名稱和電子郵件輸入欄位應包含 ID，而非文字。請新增 spellcheck="false"，以免瀏覽器將其重寫為與帳戶不符的內容。input type="email" 一律停用 autocorrect 和 autocapitalize，但非電子郵件使用者名稱必須使用這兩項。
讓按鈕發揮作用
按鈕請使用 <button>。您也可以使用 <input type="submit">，但請勿使用 div 或其他隨機元素做為按鈕。按鈕元素提供無障礙行為、內建表單提交功能，且可輕鬆設定樣式。
為每個表單提交按鈕提供說明其功能的值。使用清楚、可辨識的標籤。例如，使用「登入」，而非「繼續」或「提交」。
盡可能使用單一姓名輸入欄位
除非有充分理由需要分開儲存名字、姓氏、敬稱或其他姓名部分，否則請讓使用者在單一輸入欄位中輸入姓名。使用單一姓名輸入欄位可簡化表單、啟用剪下和貼上功能，並簡化自動填入功能。
允許國際名稱。驗證時，請避免使用僅比對拉丁字元的規則運算式。「僅限拉丁字母」會排除姓名或地址含有非拉丁字母字元的使用者。請改為允許 Unicode 字母比對，並確保後端安全支援 Unicode 做為輸入和輸出。新式瀏覽器對規則運算式中的 Unicode 支援良好。
顯示登入進度
在登入流程的每個步驟中，使用網頁標題和描述性按鈕值，清楚說明目前需要執行的操作，以及下一個步驟。
在表單輸入內容中使用 enterkeyhint 屬性，設定行動鍵盤的 Enter 鍵標籤。舉例來說，在多頁表單中使用 enterkeyhint="previous" 和 enterkeyhint="next"，在表單的最後一個輸入欄位中使用 enterkeyhint="done"，在搜尋輸入欄位中使用 enterkeyhint="search"。
協助使用者避免重新輸入登入資料
請務必在登入表單中加入適當的 autocomplete 值。
這樣一來，瀏覽器就能安全地儲存登入詳細資料，並正確輸入表單資料，為使用者提供協助。如果沒有自動填入功能，使用者可能會更傾向以實體方式記錄登入詳細資料，或以不安全的方式將登入資料儲存在裝置上。
仔細驗證
在使用者輸入資料時和提交表單前，驗證資料。請使用 type="email" 輸入電子郵件地址，瀏覽器會自動驗證格式。在必填欄位中加入 required 屬性，避免使用者提交空白內容。
將登入功能放入專屬的 <form> 元素
當您要求使用者輸入資料時，請一律使用 <form> 元素
請勿將輸入內容包裝在 <div> 中，並純粹使用 JavaScript 處理輸入資料提交。一般來說，最好使用 <form> 元素。這樣一來，螢幕閱讀器和其他輔助裝置就能存取您的網站、啟用一系列內建瀏覽器功能、簡化舊版瀏覽器的基本功能登入程序，而且即使 JavaScript 失敗，仍可正常運作。
請勿重複輸入
有些網站會強制使用者輸入兩次電子郵件地址或密碼。這或許能減少少數使用者的錯誤，但會增加所有使用者的工作量，並提高放棄率。如果瀏覽器會自動填入電子郵件地址或建議高強度密碼，要求使用者輸入兩次也沒有意義。建議您讓使用者確認電子郵件地址 (無論如何都必須這麼做)，並在必要時輕鬆重設密碼。
不公開密碼，但允許使用者查看
密碼輸入欄位應有 type="password"，以隱藏密碼文字，並協助瀏覽器瞭解輸入內容是密碼。(請注意，瀏覽器會使用各種技術來瞭解輸入角色，並決定是否要提供儲存密碼的選項)。
建議您新增「顯示密碼」切換鈕，讓使用者檢查輸入的文字，也別忘了新增「忘記密碼」連結。
為行動裝置使用者提供合適的鍵盤
使用 <input type="email"> 為行動裝置使用者提供適當的鍵盤，並啟用瀏覽器的基本內建電子郵件地址驗證功能，完全不需要 JavaScript！
如需使用電話號碼而非電子郵件地址，<input type="tel"> 會在行動裝置上啟用電話撥號鍵盤。您也可以視需要使用 inputmode 屬性：inputmode="numeric" 適合用於 PIN 碼。
避免行動裝置鍵盤遮住「登入」按鈕
如果不小心，行動鍵盤可能會遮住表單，甚至部分遮住「登入」按鈕。使用者可能還沒搞清楚狀況就放棄了。
請盡可能避免這種情況，方法是在登入頁面頂端只顯示電子郵件 (或電話) 和密碼輸入欄位，以及「登入」按鈕。其他內容則放在下方。
協助使用者避免重新輸入資料
您可以協助瀏覽器正確儲存資料並自動填入輸入內容，這樣使用者就不必記住輸入電子郵件和密碼值。這點在行動裝置上尤其重要，對於電子郵件輸入欄位更是如此，因為這類欄位的放棄率很高。這項程序包括下列兩大部分：
autocomplete、name、id和type屬性可協助瀏覽器瞭解輸入內容的角色，以便儲存資料，供日後自動填入。如要允許儲存資料以供自動填入，新式瀏覽器也要求輸入內容必須具有穩定的name或id值 (而非在每次載入網頁或部署網站時隨機產生)，且必須位於具有submit按鈕的<form>元素中。autocomplete屬性可協助瀏覽器使用儲存的資料，正確自動填入輸入內容。
對於電子郵件輸入，請使用 autocomplete="username"，因為新式瀏覽器中的密碼管理工具可辨識 username，即使您應該使用 type="email"，且可能想使用 id="email" 和 name="email"。如果是密碼輸入欄位，請使用適當的 autocomplete 值，協助瀏覽器區分新密碼和現有密碼。
針對現有密碼使用 autocomplete="current-password"
必要：在登入表單中，使用 autocomplete="current-password" 做為密碼輸入欄位。這會指示瀏覽器使用目前為網站儲存的密碼。
登入表單：
<input type="password" autocomplete="current-password" id="current-password" …>
允許瀏覽器建議高強度密碼
新式瀏覽器會使用經驗法則，決定何時顯示密碼管理工具 UI，並建議高強度密碼。
瀏覽器內建密碼產生器，使用者和開發人員不必費心思考什麼是「高強度密碼」。瀏覽器可以安全地儲存密碼，並在必要時自動填入，使用者不必記住或輸入密碼。鼓勵使用者利用瀏覽器內建的密碼產生器，也代表他們更有可能在您的網站上使用不重複的高強度密碼，且不太可能重複使用可能在其他地方遭盜用的密碼。
避免使用者不小心漏掉輸入內容
必要：在電子郵件和密碼欄位中加入 required 屬性。新式瀏覽器會自動提示並聚焦於遺漏的資料。
<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
允許貼上密碼
部分網站不允許在密碼輸入欄位貼上文字。
禁止貼上密碼會造成使用者困擾，導致他們使用容易記住的密碼 (因此可能更容易遭到破解)，而且根據英國國家網路安全中心等機構的說法，這實際上可能會降低安全性。使用者只有在嘗試貼上密碼後，才會發現系統不允許貼上密碼，因此不允許貼上密碼並無法避免剪貼簿安全漏洞。
備用策略
自動填入功能是漸進增強功能。如果瀏覽器不支援自動填入功能，使用者只需手動輸入登入憑證即可。語意 HTML 限制 (例如 type、inputmode 和 required) 仍會正常運作，驗證使用者輸入內容並提供正確的虛擬鍵盤。