協助使用者註冊
註冊表單通常是訪客在網站上與表單的第一次互動。 設計良好的註冊表單至關重要，安全表單更是不可或缺。
查看註冊表單，瞭解如何協助使用者在網站上註冊。
盡量簡化註冊表單，只顯示建立帳戶所需的表單控制項。請勿重複使用表單控制項，協助使用者正確填寫帳戶詳細資料。改為傳送確認電子郵件。
帳戶詳細資料
您可以使用適當的 autocomplete 屬性，協助使用者填寫帳戶詳細資料。在電子郵件欄位中使用 autocomplete="email"，並在新密碼欄位中使用 autocomplete="new-password"。
進一步瞭解自動填寫輸入控制項。
您也可以提供顯示密碼 <button>，協助使用者輸入安全密碼。進一步瞭解顯示密碼模式。
保護註冊表單
請勿以純文字格式儲存或傳輸密碼。請務必加鹽並雜湊處理密碼，且不要嘗試自行設計雜湊演算法。
提供多重驗證，尤其是在儲存個人或私密資料時。簡訊 OTP 最佳做法和使用 WebAuthn 啟用高強度驗證說明如何導入多重驗證。
確保使用者不會使用遭外洩的密碼。舉例來說，您可以使用「Have I Been Pwned」的 API 偵測遭外洩的密碼，並建議使用者填寫其他新密碼，或在密碼遭外洩時向他們發出警告。
協助使用者登入
瞭解如何建構登入表單，確保使用者可以登入網站。
將註冊和登入按鈕放在顯眼的位置。 確認表單可在觸控裝置上使用：
- 按鈕的輕觸目標大小至少為 48 像素。
- 表單元素的大小
font-size夠大 (20px在行動裝置上大小適中)。 - 表單控制項之間有足夠的空間 (
margin)，且輸入內容夠大 (在行動裝置上至少使用padding: 15px)。
協助使用者填寫電子郵件地址和密碼
協助瀏覽器和密碼管理工具自動填入帳戶詳細資料。
電子郵件欄位請使用 autocomplete="email"，目前密碼欄位請使用 autocomplete="current-password"。
如要協助使用者手動填寫帳戶詳細資料，請使用 type="email"
，在行動裝置上顯示電子郵件欄位的適當螢幕小鍵盤。
請為電子郵件和密碼欄位使用 required 屬性，以便在使用者提交表單時，警告無效值。建議使用即時驗證，協助使用者在輸入無效資料後立即修正，不必等到提交表單。
確保使用者能看到輸入的密碼
為尊重使用者隱私，系統預設會遮蓋您填入 <input type="password"> 的文字。顯示 <button>，讓使用者切換輸入文字的顯示狀態，方便輸入密碼。
進一步瞭解如何導入密碼顯示圖示 <button>。
確認登入和註冊表單可正常使用
定期請真人測試登入和註冊表單，確保驗證功能正常運作。 使用 Analytics 和實際使用者評估 (RUM) 收集欄位資料，並使用 Lighthouse 和 PageSpeed Insights 等工具自行執行測試。進一步瞭解如何測試可用性和收集分析資料。
確認表單在不同瀏覽器和平台都能正常運作。 只使用鍵盤，或使用螢幕閱讀器 (例如 Mac 上的 VoiceOver 或 Windows 上的 NVDA)，在不同螢幕大小的裝置上測試表單。
協助使用者變更帳戶設定
確認使用者可以變更所有帳戶設定，包括電子郵件地址、密碼和使用者名稱。
清楚說明您儲存的資料，並協助使用者隨時下載所有個人資料。確保使用者可以視需要刪除帳戶。 在某些地區，這類帳戶管理功能可能是法律規定。
確保使用者可以更新密碼
讓使用者更容易更新密碼。
要求使用者先提供目前的密碼，再變更密碼，並傳送電子郵件通知使用者密碼已變更，同時提供還原及鎖定帳戶的選項。
新增要求新密碼的選項，並考慮提供要求新密碼的 .well-known 網址。