登入表單最佳做法

使用跨平台瀏覽器功能，建構安全、無障礙且易於使用的登入表單。

Sam Dutton

如果使用者需要登入網站，登入表單的設計就非常重要。如果使用者連線不佳、使用行動裝置、趕時間或壓力大，更是如此。設計不佳的登入表單會導致跳出率偏高。 每次跳出都可能代表失去一位不滿的使用者，而不只是錯失登入機會。

以下是簡單的登入表單範例，示範所有最佳做法：

檢查清單

• 使用有意義的 HTML 元素：<form>、<input>、<label> 和 <button>。
• 使用 <label> 標示每個輸入內容。
• 使用元素屬性存取內建瀏覽器功能：type、name、autocomplete、required。
• 為輸入 name 和 id 屬性提供穩定值，不會在載入網頁或網站部署之間變更。
• 將登入功能放在專屬的 <form> 元素中。
• 確保表單提交成功。
• 在註冊表單中輸入密碼，以及在重設密碼表單中輸入新密碼時，請使用 autocomplete="new-password" 和 id="new-password"。
• 使用 autocomplete="current-password" 和 id="current-password" 輸入登入密碼。
• 提供「顯示密碼」功能。
• 使用 aria-label 和 aria-describedby 輸入密碼。
• 請勿重複輸入。
• 設計表單時，請確保行動鍵盤不會遮住輸入欄位或按鈕。
• 確保表單可在行動裝置上使用：使用清晰易讀的文字，並確保輸入內容和按鈕夠大，可做為觸控目標。
• 在註冊和登入頁面維持品牌形象和風格。
• 在實際環境和實驗室中測試：將網頁數據分析、互動數據分析和以使用者為中心的效能評估功能，整合至註冊和登入流程。
• 在不同瀏覽器和裝置上測試：表單行為在不同平台上會有很大差異。

使用有意義的 HTML

請使用專為這項工作設計的元素：<form>、<label> 和 <button>。這些屬性可啟用內建瀏覽器功能、改善無障礙功能，並為標記增添意義。

使用<form>

您可能會想將輸入內容包裝在 <div> 中，並完全使用 JavaScript 處理輸入資料提交作業。一般來說，最好使用一般的舊 <form> 元素。這樣一來，螢幕閱讀器和其他輔助裝置就能存取您的網站、啟用一系列內建瀏覽器功能、簡化舊版瀏覽器的基本功能登入程序，而且即使 JavaScript 失敗，仍可正常運作。

使用<label>

如要為輸入內容加上標籤，請使用 <label>！

<label for="email">Email</label>
<input id="email" …>

原因有兩個：

• 輕觸或點選標籤，焦點就會移至輸入欄位。如要將標籤與輸入欄位建立關聯，請使用標籤的 for 屬性，並搭配輸入欄位的 name 或 id。
• 當標籤或標籤的輸入內容成為焦點時，螢幕閱讀器會朗讀標籤文字。

請勿將預留位置當做輸入標籤。使用者開始輸入文字後，很容易忘記輸入內容的用途，尤其是分心時 (「我輸入的是電子郵件地址、電話號碼還是帳戶 ID？」)。預留位置還有許多其他潛在問題：如果您不相信，請參閱「請勿使用預留位置屬性」和「表單欄位中的預留位置有害」。

建議將標籤放在輸入欄位上方。這可確保行動裝置和電腦的設計一致，且根據 Google AI 研究，使用者能更快瀏覽。您會取得全寬標籤和輸入欄位，且不需要調整標籤和輸入欄位寬度來配合標籤文字。

在行動裝置上開啟 label-position 示範，親自體驗。

使用<button>

按鈕請使用 <button>！按鈕元素提供無障礙行為和內建表單提交功能，而且可以輕鬆設定樣式。使用 <div> 或其他元素假裝成按鈕，並沒有任何意義。

請確保提交按鈕的文字說明其功能。例如「建立帳戶」或「登入」，而非「提交」或「開始」。

確保表單成功提交

協助密碼管理工具瞭解表單已提交。設定的方法有兩種：

• 前往其他頁面。
• 使用 History.pushState() 或 History.replaceState() 模擬導覽，並移除密碼表單。

使用 XMLHttpRequest 或 fetch 要求時，請確認回應中回報登入成功，並從 DOM 中移除表單，以及向使用者表示成功，藉此處理登入成功。

建議您在使用者輕觸或點選「登入」按鈕後，停用該按鈕。許多使用者會多次點擊按鈕，即使在快速且回應迅速的網站上也是如此。這會減慢互動速度，並增加伺服器負載。

相反地，請勿在等待使用者輸入時停用表單提交功能。舉例來說，如果使用者尚未輸入客戶 PIN 碼，請勿停用「登入」按鈕。使用者可能會漏填表單中的某些內容，然後嘗試重複輕觸 (已停用的)「登入」按鈕，並認為該按鈕無法運作。至少，如果您必須停用表單提交功能，請向使用者說明點選停用按鈕時缺少什麼。

請勿重複輸入

有些網站會強制使用者輸入兩次電子郵件地址或密碼。這或許能減少少數使用者的錯誤，但會增加「所有」使用者的工作量，並提高放棄率。如果瀏覽器會自動填入電子郵件地址或建議高強度密碼，要求使用者輸入兩次也沒有意義。建議您讓使用者確認電子郵件地址 (無論如何都必須這麼做)，並在必要時讓他們輕鬆重設密碼。

充分運用元素屬性

這就是魔法生效之處！瀏覽器內建多項實用功能，可使用輸入元素屬性。

不公開密碼，但允許使用者查看

密碼輸入欄位應包含 type="password"，以隱藏密碼文字，並協助瀏覽器瞭解輸入內容是密碼。(請注意，瀏覽器會使用多種技術來瞭解輸入角色，並決定是否要提供儲存密碼的選項)。

您應新增「顯示密碼」切換鈕，讓使用者能檢查輸入的文字，也別忘了新增「忘記密碼」連結。請參閱「啟用密碼顯示」。

為行動裝置使用者提供合適的鍵盤

使用 <input type="email"> 為行動裝置使用者提供適當的鍵盤，並啟用瀏覽器內建的基本電子郵件地址驗證功能，完全不需要 JavaScript！

如需使用電話號碼而非電子郵件地址，<input type="tel"> 會在行動裝置上啟用電話撥號鍵盤。您也可以視需要使用 inputmode 屬性：inputmode="numeric" 適合用於 PIN 碼。Everything You Ever Wanted to Know About inputmode (inputmode 相關資訊) 一文提供更多詳細資料。

避免行動鍵盤遮住「登入」按鈕

不過，如果不小心，行動鍵盤可能會遮住表單，甚至部分遮住「登入」按鈕。使用者可能在瞭解情況前就放棄。

請盡可能避免這種情況，在登入頁面頂端只顯示電子郵件 (或電話) 和密碼輸入欄位，以及「登入」按鈕。其他內容則放在下方。

在各種裝置上測試

您必須在目標對象使用的各種裝置上進行測試，並視情況調整。BrowserStack 可讓您在各種實際裝置和瀏覽器上免費測試開放原始碼專案。

建議使用兩個頁面

部分網站 (包括 Amazon 和 eBay) 會在兩個頁面分別要求輸入電子郵件 (或電話) 和密碼，避免發生這個問題。這種做法也能簡化體驗：使用者一次只需要處理一件事。

理想情況下，這應該使用單一 <form> 實作。使用 JavaScript 一開始只顯示電子郵件輸入，然後隱藏並顯示密碼輸入。如果必須強制使用者在輸入電子郵件和密碼之間前往新頁面，第二頁的表單應包含隱藏的輸入元素，其中包含電子郵件值，協助密碼管理工具儲存正確的值。Chromium 可解讀的密碼表單樣式提供程式碼範例。

協助使用者避免重新輸入資料

您可以協助瀏覽器正確儲存資料並自動填入輸入內容，這樣使用者就不必記住輸入電子郵件和密碼值。這在行動裝置上尤其重要，對於放棄率很高的電子郵件輸入欄位更是如此。

這項程序包括下列兩大部分：

1. autocomplete、name、id 和 type 屬性可協助瀏覽器瞭解輸入內容的角色，以便儲存資料，供日後自動填入。如要允許儲存資料以供自動填入，新式瀏覽器也要求輸入內容必須具有穩定的 name 或 id 值 (而非在每次載入網頁或部署網站時隨機產生)，且必須位於含有 submit 按鈕的 <form> 中。

2. autocomplete 屬性可協助瀏覽器使用儲存的資料，正確自動填入輸入內容。

如要輸入電子郵件，請使用 autocomplete="username"，因為新式瀏覽器中的密碼管理工具可辨識 username，即使您應該使用 type="email"，且可能想使用 id="email" 和 name="email"。

如果是密碼輸入欄位，請使用適當的 autocomplete 和 id 值，協助瀏覽器區分新密碼和現有密碼。

使用 autocomplete="new-password" 和 id="new-password" 設定新密碼

• 在註冊表單中輸入密碼，或在變更密碼表單中輸入新密碼時，請使用 autocomplete="new-password" 和 id="new-password"。

針對現有密碼使用 autocomplete="current-password" 和 id="current-password"

• 在登入表單中，使用 autocomplete="current-password" 和 id="current-password" 輸入密碼，或在變更密碼表單中輸入使用者的舊密碼。這會告知瀏覽器，您希望它使用目前為網站儲存的密碼。

註冊表單：

<input type="password" autocomplete="new-password" id="new-password" …>

登入：

<input type="password" autocomplete="current-password" id="current-password" …>

支援密碼管理工具

不同瀏覽器處理電子郵件自動填入和密碼建議的方式略有不同，但效果大致相同。舉例來說，在電腦上使用 Safari 11 以上版本時，系統會顯示密碼管理工具，然後使用生物辨識驗證 (指紋或臉部辨識，如有)。

電腦版 Chrome 顯示電子郵件建議和密碼管理工具，並自動填入密碼。

瀏覽器密碼和自動填入系統並不簡單。推測、儲存和顯示值的演算法並未標準化，且因平台而異。舉例來說，Hidde de Vries 指出：「Firefox 的密碼管理工具會使用配方系統來補充其啟發式演算法。」

自動填入：網頁開發人員應瞭解但不知道的事，其中包含更多關於使用 name 和 autocomplete 的資訊。HTML 規格列出了所有 59 個可能的值。

允許瀏覽器建議高強度密碼

新式瀏覽器會使用經驗法則，決定何時顯示密碼管理工具 UI，並建議高強度密碼。

以下是 Safari 電腦版的做法。

(Safari 12.0 以上版本會建議不重複的高強度密碼)。

瀏覽器內建密碼產生器，使用者和開發人員不必費心思考什麼是「高強度密碼」。瀏覽器可以安全地儲存密碼，並在必要時自動填入，因此使用者不必記住或輸入密碼。鼓勵使用者利用瀏覽器內建的密碼產生器，也代表他們更有可能在您的網站上使用不重複的高強度密碼，且不太可能重複使用可能在其他地方遭盜用的密碼。

避免使用者不小心漏掉輸入內容

在電子郵件和密碼欄位中加入 required 屬性。新式瀏覽器會自動提示並聚焦於遺漏的資料。不需使用 JavaScript！

針對手指和拇指設計

幾乎所有與輸入元素和按鈕相關的預設瀏覽器大小都太小，尤其是在行動裝置上。這點看似顯而易見，但許多網站的登入表單都常發生這個問題。

確保輸入內容和按鈕夠大

輸入和按鈕的預設大小和邊框間距在電腦上太小，在行動裝置上更小。

根據 Android 無障礙指南，觸控螢幕物件的建議目標大小為 7 至 10 公釐。Apple 介面指南建議 48x48 像素，W3C 則建議至少 44x44 CSS 像素。以此為基礎，在行動裝置上，為輸入元素和按鈕新增至少約 15 像素的邊框間距，在電腦上則新增約 10 像素。請使用實際的行動裝置和手指或拇指試試看。您應該可以輕鬆輕觸每個輸入內容和按鈕。

輕觸目標大小不適當 Lighthouse 稽核可協助您自動偵測過小的輸入元素。

設計時考量拇指操作

搜尋「觸控目標」，就會看到許多食指的圖片。不過，在現實生活中，許多人會用拇指與手機互動。拇指比食指大，控制精確度較低。因此，觸控目標的大小必須適中。

文字大小應適中

與大小和邊框間距一樣，輸入元素和按鈕的預設瀏覽器字型大小太小，尤其是在行動裝置上。

不同平台上的瀏覽器會以不同方式調整字型大小，因此很難指定在所有平台上都能正常顯示的特定字型大小。快速調查熱門網站後，發現電腦版網站的字體大小為 13 至 16 像素，因此行動版網站的文字大小至少應與這個實際大小相符。

這表示您必須在行動裝置上使用較大的像素大小：在電腦版 Chrome 上，16px 相當清晰易讀，但即使視力良好，在 Android 版 Chrome 上也很難閱讀 16px 文字。您可以使用媒體查詢，為不同的可視區域大小設定不同的字型像素大小。20px 在行動裝置上差不多合適，但你應該找低視能的朋友或同事測試。

文件未使用易讀的字型大小 Lighthouse 稽核可協助您自動偵測過小的文字。

在輸入內容之間保留足夠空間

請加入足夠的邊界，讓輸入內容能做為觸控目標。也就是說，請預留約一指寬的邊界。

確認輸入內容清晰可見

輸入欄位的預設框線樣式會導致欄位難以辨識。在某些平台 (例如 Android 版 Google Chrome) 上，幾乎看不到捲軸。

除了邊框間距外，請加上框線：在白色背景上，一般建議使用 #ccc 或更深的顏色。

使用內建瀏覽器功能，在輸入值無效時發出警告

瀏覽器內建功能，可針對具有 type 屬性的輸入內容進行基本表單驗證。提交含有無效值的表單時，瀏覽器會發出警告，並將焦點設在有問題的輸入欄位。

您可以使用 :invalid CSS 選取器醒目顯示無效資料。請使用 :not(:placeholder-shown)，避免選取沒有內容的輸入。

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

嘗試以不同方式醒目顯示無效值的輸入內容。

視需要使用 JavaScript

切換密碼顯示設定

建議您新增「顯示密碼」切換鈕，讓使用者查看輸入的文字。如果使用者看不到輸入的文字，可用性就會降低。目前沒有內建的方法可以執行這項操作，但我們已計劃實作。請改用 JavaScript。

下列程式碼使用文字按鈕新增「顯示密碼」功能。

HTML：

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

以下是讓按鈕看起來像純文字的 CSS：

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

以及顯示密碼的 JavaScript：

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

最終結果如下：

讓密碼輸入欄位符合無障礙設計

使用 aria-describedby 概述密碼規則，並提供描述限制的元素 ID。螢幕閱讀器會提供標籤文字、輸入類型 (密碼) 和說明。

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

新增「Show password」功能時，請務必加入 aria-label，警告系統會顯示密碼。否則使用者可能會不小心洩漏密碼。

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

您可以在下列示範中，查看這兩項 ARIA 功能的實際運作情形：

如需更多實用提示，請參閱「建立無障礙表單」。

即時驗證，並在提交前驗證

HTML 表單元素和屬性內建基本驗證功能，但您也應使用 JavaScript，在使用者輸入資料和嘗試提交表單時，進行更完善的驗證。

登入表單程式碼實驗室的步驟 5 使用限制驗證 API (廣受支援)，透過內建瀏覽器 UI 新增自訂驗證，設定焦點並顯示提示。

詳情請參閱「使用 JavaScript 進行更複雜的即時驗證」。

數據分析和 RUM

「無法評估就無法改進」這句話特別適用於註冊和登入表單。您需要設定目標、評估成效、改善網站，然後重複這個過程。

折扣可用性測試有助於嘗試變更，但您需要實際資料，才能真正瞭解使用者對註冊和登入表單的體驗：

• 網頁數據分析：註冊和登入網頁瀏覽次數、跳出率和離開率。
• 互動數據分析：目標漏斗 (使用者在何處放棄登入或登入流程？) 和事件 (使用者與表單互動時採取哪些動作？)
• 網站效能：以使用者為中心的指標 (註冊和登入表單是否因故變慢？如果是，原因為何？)。

您也可以考慮實施 A/B 測試，嘗試不同的註冊和登入方式，並分階段推出，先在部分使用者中驗證變更，再向所有使用者發布變更。

一般指南

精心設計的使用者介面和使用者體驗，可減少使用者放棄填寫登入表單的情況：

• 別讓使用者費心尋找登入按鈕！在頁面頂端放置登入表單的連結，並使用容易理解的字詞，例如「登入」、「建立帳戶」或「註冊」。
• 保持專注！註冊表單不適合用來提供優惠和其他網站功能，以免分散使用者注意力。
• 盡量簡化註冊流程。只有在使用者能清楚看到提供資料的好處時，才收集其他使用者資料 (例如地址或信用卡詳細資料)。
• 在使用者開始填寫註冊表單前，請清楚說明價值主張。登入後，他們能獲得什麼好處？提供具體誘因，鼓勵使用者完成註冊。
• 如果可以，請允許使用者以手機號碼而非電子郵件地址識別身分，因為有些使用者可能不使用電子郵件。
• 讓使用者能輕鬆重設密碼，並將「忘記密碼？」連結放在顯眼的位置。
• 提供服務條款和隱私權政策文件的連結：一開始就向使用者清楚說明您如何保護他們的資料。
• 在註冊和登入頁面中加入貴公司或貴組織的標誌和名稱，並確保語言、字型和樣式與網站其他部分一致。有些表單看起來不像是與其他內容屬於同一個網站，尤其是網址明顯不同時。

持續掌握情況

• 建立出色的表單
• 行動表單設計最佳做法
• 更強大的表單控制項
• 建立無障礙表單
• 使用 Credential Management API 簡化登入流程
• 使用 WebOTP API 驗證網頁上的電話號碼