使用跨平台瀏覽器功能，建立安全、無障礙且易於使用的登入表單。
如果使用者需要登入您的網站，則良好的登入表單設計至關重要。對於連線不佳、使用行動裝置、急忙或處於壓力下的使用者來說，這一點尤其重要。設計不良的登入表單會導致跳出率偏高。每個跳出事件都可能代表使用者流失，並且對使用者造成不滿，而不僅是錯失登入商機。
以下是簡單的登入表單範例，其中展示了所有最佳做法：
檢查清單
- 使用有意義的 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 Glitch，親自查看。
使用 <button>
使用 <button> 建立按鈕！按鈕元素可提供無障礙行為和內建表單提交功能，而且還能輕鬆設定樣式。使用 <div> 或其他元素假裝成按鈕並無意義。
請確認提交按鈕會顯示其功能。例如「建立帳戶」或「登入」，而非「提交」或「開始」。
確認表單提交成功
協助密碼管理工具瞭解表單已提交。有兩種做法可以設定：
- 前往其他頁面。
- 使用
History.pushState()或History.replaceState()模擬導覽，並移除密碼表單。
使用 XMLHttpRequest 或 fetch 要求時，請務必在回應中回報登入成功，並透過從 DOM 移除表單，以及向使用者指出成功，來處理這項要求。
使用者輕觸或點選「Sign in」按鈕後，建議您停用該按鈕。許多使用者會多次點選按鈕，即使是速度快且回應迅速的網站也不例外。這會導致互動速度變慢，並增加伺服器負載。
反之，請勿在等待使用者輸入內容時停用表單提交功能。舉例來說，如果使用者尚未輸入客戶 PIN 碼，請勿停用「Sign in」按鈕。使用者可能會在表單中遺漏某些項目，然後嘗試重複點選 (已停用)「Sign in」按鈕，並認為按鈕無法正常運作。如果您必須停用表單提交功能，請至少向使用者說明點選停用按鈕後會發生的情況。
不要重複輸入
有些網站會強制使用者輸入電子郵件地址或密碼兩次。這麼做或許能減少部分使用者的錯誤，但會讓所有使用者額外付出心力，並提高放棄率。在瀏覽器自動填入電子郵件地址或建議強式密碼的情況下，詢問兩次也毫無意義。建議您讓使用者確認電子郵件地址 (您還是需要這麼做)，並在必要時讓他們輕鬆重設密碼。
充分運用元素屬性
這就是神奇之處！瀏覽器內建多項實用功能，可使用輸入元素屬性。
將密碼設為私密，但讓使用者可視需要查看密碼
密碼輸入框應使用 type="password" 隱藏密碼文字，並協助瀏覽器瞭解輸入內容是密碼。(請注意，瀏覽器會使用各種技巧來瞭解輸入角色，並決定是否要提供密碼儲存選項)。
您應該新增「顯示密碼」切換按鈕，讓使用者檢查自己輸入的文字。別忘了新增「忘記密碼」連結。請參閱「啟用密碼顯示功能」。
為行動使用者提供合適的鍵盤
使用 <input type="email"> 為行動使用者提供適當的鍵盤，並啟用瀏覽器內建的基本電子郵件地址驗證功能，完全不需要 JavaScript！
如果您需要使用電話號碼而非電子郵件地址，<input
type="tel"> 會在行動裝置上啟用電話號碼鍵盤。您也可以在必要時使用 inputmode 屬性：inputmode="numeric" 非常適合用於 PIN 碼。如需進一步瞭解 inputmode，請參閱相關說明。
避免行動裝置鍵盤遮住「登入」按鈕
很抱歉，如果您不小心，行動裝置的鍵盤可能會遮住表單，甚至會部分遮住「登入」按鈕。使用者可能會在瞭解發生的情況前放棄。
盡量避免這種情況，請在登入頁面頂端只顯示電子郵件/電話號碼和密碼輸入欄位，以及「Sign in」按鈕。請在下方放置其他內容。
在各種裝置上測試
您需要針對目標對象測試各種裝置，並據此調整。BrowserStack 可讓您在各種實際裝置和瀏覽器上免費測試開放原始碼專案。
建議使用兩個頁面
部分網站 (包括 Amazon 和 eBay) 會在兩個頁面上要求輸入電子郵件/電話和密碼，以避免發生這個問題。這種做法也能簡化使用體驗：使用者一次只需執行一項工作。
理想情況下，這項功能應使用單一 <form> 實作。請使用 JavaScript 在最初只顯示電子郵件輸入欄，然後隱藏該欄並顯示密碼輸入欄。如果您必須強制使用者在輸入電子郵件地址和密碼之間前往新頁面，第二頁的表單應包含隱藏的電子郵件值輸入元素，以便密碼管理工具儲存正確的值。如需程式碼範例，請參閱「Chromium 支援的密碼表單樣式」。
協助使用者避免重新輸入資料
您可以協助瀏覽器正確儲存資料，並自動填入輸入內容，讓使用者不必記得輸入電子郵件地址和密碼值。這點在行動裝置上尤其重要，對於電子郵件輸入內容更是如此，因為電子郵件輸入內容的放棄率很高。
這項程序分為兩個部分：
autocomplete、name、id和type屬性可協助瀏覽器瞭解輸入內容的角色，以便儲存日後可用於自動填入的資料。為了讓系統儲存資料以供自動填入，新一代瀏覽器還要求輸入內容必須具備穩定的name或id值 (不會在每次載入網頁或部署網站時隨機產生)，且必須位於含有submit按鈕的 <form> 中。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 介面指南建議使用 48 x 48 像素，而 W3C 則建議使用至少 44 x 44 CSS 像素。基於這個原則，請在行動裝置的輸入元素和按鈕中加入 (至少) 約 15 像素的邊框間距，在電腦版中則加入約 10 像素的邊框間距。請使用實際的行動裝置和手指或大拇指試試看。您應該可以輕鬆輕觸每個輸入項目和按鈕。
輕觸目標的大小不正確 Lighthouse 稽核功能可協助您自動偵測輸入元素是否過小。
針對拇指設計
搜尋「觸控目標」，您會看到許多食指的圖片。不過，在現實世界中，許多人會使用大拇指與手機互動。大拇指比食指大，因此控制精準度較低。這也是為何我們建議使用適當大小的觸控目標。
放大文字
與大小和邊框間距相同，輸入元素和按鈕的預設瀏覽器字型大小也太小，尤其是在行動裝置上。
不同平台的瀏覽器會以不同方式調整字型大小，因此很難指定在所有平台上都能正常運作的特定字型大小。我們快速調查了幾個熱門網站，發現電腦版網站的字體大小為 13 到 16 像素，因此建議您在行動版網站上使用相同的實際大小，以便顯示最小字體。
也就是說，您需要在行動裝置上使用較大的像素大小：在 Chrome 桌面版上，16px 相當易讀，但即使視力良好，在 Android 版 Chrome 上也難以閱讀 16px 文字。您可以使用媒體查詢，為不同的檢視點大小設定不同的字型像素大小。20px 在行動裝置上大致合適，但您應向視力不佳的朋友或同事進行測試。
文件使用的字型大小難以辨識 Lighthouse 稽核可協助您自動偵測過小的文字。
輸入內容之間應留有足夠的空間
請留出足夠的邊界，讓輸入內容可做為觸控目標。換句話說，請將邊界設為大約一根手指寬。
確保輸入內容清晰可見
輸入框的預設邊框樣式會讓輸入框難以辨識。在部分平台 (例如 Android 版 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>
新增「顯示密碼」功能時，請務必加入 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>
您可以在下列 Glitch 中，查看這兩項 ARIA 功能的實際運作情形：
如要進一步瞭解如何製作無障礙表單，請參閱這篇文章。
在提交前即時驗證
HTML 表單元素和屬性內建基本驗證功能，但您也應使用 JavaScript 在使用者輸入資料和嘗試提交表單時，執行更強大的驗證。
登入表單程式碼研究室的步驟 5 使用 Constraint Validation API (廣泛支援) 新增自訂驗證機制，使用內建瀏覽器 UI 設定焦點並顯示提示。
進一步瞭解：使用 JavaScript 進行更複雜的即時驗證。
Analytics 和 RUM
「有數據為憑，才可能改進」這句話尤其適用於註冊和登入表單。你必須設定目標、評估成效、改善網站，然後再重複上述步驟。
Discount 可用性測試可協助您試用變更，但您需要實際資料，才能真正瞭解使用者如何體驗註冊和登入表單：
- 網頁數據分析：註冊和登入網頁的瀏覽次數、跳出率和離開次數。
- 互動分析：目標漏斗 (使用者在哪裡放棄登入或登入流程？) 和事件 (使用者在與表單互動時採取哪些動作？)
- 網站成效：以使用者為中心的指標 (註冊和登入表單是否因某些原因而速度緩慢，如果是的話，原因為何？)。
您也可以考慮實施 A/B 版本測試，嘗試不同的註冊和登入方法，並分階段推出，以便在對部分使用者進行變更驗證後，再將變更發布給所有使用者。
一般指南
精心設計的 UI 和 UX 可降低登入表單放棄率：
- 請勿讓使用者在應用程式中尋找登入選項！在頁面頂端放置登入表單的連結，並使用簡單易懂的字詞，例如「Sign In」、「Create Account」或「Register」。
- 請保持專注！註冊表單並非展示優惠和其他網站功能，以免分散使用者的注意力。
- 盡量簡化註冊程序。只有在使用者認為提供這些資料有明顯好處時，才收集其他使用者資料 (例如地址或信用卡詳細資料)。
- 在使用者開始填寫註冊表單前，請先清楚說明價值主張。他們註冊後可獲得哪些好處？提供具體獎勵，鼓勵使用者完成註冊程序。
- 盡可能讓使用者以手機號碼而非電子郵件地址驗證身分，因為有些使用者可能不會使用電子郵件。
- 讓使用者輕鬆重設密碼，並清楚顯示「忘記密碼了嗎？」連結。
- 連結至服務條款和隱私權政策文件：一開始就向使用者說明您如何保護他們的資料。
- 在註冊和登入頁面中加入貴公司或機構的標誌和名稱，並確保語言、字型和樣式與網站的其他部分一致。有些表單似乎不屬於其他內容所屬的網站，尤其是當表單的網址與其他內容的網址截然不同時。
持續學習
相片來源：Meghan Schiereck 在 Unsplash 上提供。