身分

註冊表單通常是使用者第一次與網站上的表單互動。 良好的註冊表單設計極為重要,同時也應提供安全的表單。

讓我們來看看申請表單,以及如何協助使用者在網站上完成註冊。

盡量簡化註冊表單,只顯示建立帳戶所需的表單控制項。 請勿將表單控制項加倍,讓使用者能正確取得帳戶詳細資料。 請改為傳送確認電子郵件。

協助使用者填寫帳戶詳細資料

您可以使用適當的 autocomplete 屬性,協助使用者填寫帳戶詳細資料。在電子郵件欄位使用 autocomplete="email",使用 autocomplete="new-password" 做為新密碼欄位。

進一步瞭解自動填入輸入控制項

您也可以提供顯示密碼 (<button>) 協助使用者輸入安全的密碼。
進一步瞭解解鎖密碼模式

確認註冊表單安全無虞

請勿以純文字格式儲存或傳送密碼。 請務必加上鹽和雜湊密碼,請勿嘗試自行開發雜湊演算法

提供多重驗證功能,尤其是儲存個人或機密資料時。簡訊動態密碼最佳做法使用 WebAuthn 啟用高強度驗證會說明如何實作多重驗證機制。

確保使用者未使用遭外洩的密碼。 舉例來說,您可以使用 I Been Pwned 提供的 API 偵測遭外洩的密碼,並建議使用者填入其他新密碼,或在密碼遭駭時警告使用者。

協助使用者登入

一起來瞭解如何建立登入表單,確保使用者能輕鬆登入網站。

將註冊按鈕和登入按鈕的位置顯而易見。 請確認您的表單可在觸控裝置上使用:

  • 按鈕的輕觸目標大小至少為 48 像素。
  • 表單元素的 font-size 大小夠大 (20px 就適合在行動裝置上使用)。
  • 表單控制項之間有足夠的空間 (margin),且輸入內容夠大 (在行動裝置上至少要有 padding: 15px)。

協助使用者輸入電子郵件地址和密碼

協助瀏覽器和密碼管理工具自動填入帳戶詳細資料。 使用 autocomplete="email" 做為電子郵件欄位,使用 autocomplete="current-password" 做為目前的密碼欄位。

如要協助使用者手動填入帳戶詳細資料,請在電子郵件欄位使用 type="email",在行動裝置上顯示適當的螢幕小鍵盤。

在電子郵件和密碼欄位中使用 required 屬性,以便在使用者提交表單時發出警告。 建議您使用即時驗證,在使用者輸入無效資料後立即加以修正,而不需等待表單提交。

確保使用者可以看到自己輸入的密碼

為維護使用者隱私,根據預設,您為 <input type="password"> 填入的文字會經過模糊處理。 顯示 <button> 來切換所輸入文字的顯示設定,協助使用者輸入密碼。

進一步瞭解如何實作密碼提示 <button>

確認您的登入和註冊表單可用

定期與真人測試您的登入和註冊表單,確認驗證能正常運作。 您可以透過數據分析和實際使用者評估 (RUM) 收集實際資料,並透過 LighthousePageSpeed Insights 等工具自行執行測試。進一步瞭解如何測試可用性收集數據分析資料

確保您的表單可以在不同瀏覽器和平台上正常運作。 只要使用鍵盤或螢幕閱讀器 (例如 Mac 上的 VoiceOver 或 Windows NVDA),即可在各種螢幕大小上測試表單。

協助使用者變更帳戶設定

請確保使用者可以變更每項帳戶設定,包括電子郵件地址、密碼和使用者名稱

請清楚說明您儲存的資料類型,並協助使用者隨時下載所有個人資料。 確保使用者可以視需要刪除自己的帳戶。 某些地區的帳戶管理功能 (例如這些功能) 可能需要法律要求。

確保使用者可以更新密碼

讓使用者輕鬆更新密碼。

變更密碼前,先要求使用者提供目前的密碼,並傳送電子郵件有關密碼變更的電子郵件,並選擇還原並鎖定帳戶。

新增要求新密碼的選項,並考慮提供用來申請新密碼的 .well-known 網址

資源