登入表單最佳做法

使用跨平台瀏覽器功能建立安全、易於存取且方便使用的登入表單。

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 團隊的設計 研究 可讓使用者加快掃描速度。您能取得完整寬度標籤和輸入內容 不必配合標籤文字調整標籤和輸入寬度

開啟任一部裝置上的標籤位置圖示 使用行動裝置查看自己

使用 <button>

使用 <button> 查看按鈕！按鈕元素提供無障礙行為和內建表單 提交功能，並設定樣式。事實上 使用 <div> 或其他偽裝成按鈕的元素。

確保提交按鈕顯示其功能。例如「建立帳戶」、 登入，而非「提交」或「開始」。

確認成功提交表單

協助密碼管理員瞭解已提交表單。這裡共有兩個 做法如下：

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

提出 XMLHttpRequest 或 fetch 要求時，確認登入成功： 回應中所述的回應，並藉由擷取 DOM 形式處理 用來向使用者表示成功

建議在使用者輕觸或點選「登入」按鈕後停用 基礎架構使用者多次按下按鈕 即使是速度飛快、反應靈敏的網站也沒問題。這會拖慢互動速度 程式碼會增加到伺服器負載

相反地，請只在使用者輸入內容時才停用表單提交功能。例如： 如果使用者尚未輸入客戶，請勿停用「登入」按鈕 PIN 碼。使用者可能會遺漏表單內容，試著重複輕觸 (已停用) [登入] 按鈕，且認為該功能無法運作。至少 您必須停用表單提交功能，然後向使用者說明 請點選已停用的按鈕

請勿重複輸入

有些網站會強制使用者輸入電子郵件地址或密碼兩次。這可能會減少 只對少數使用者發生錯誤，但會導致「所有」使用者受到額外作業， 放棄 費率。 重複提問兩次也沒有瀏覽器會在哪些情況下自動填入電子郵件地址。 建議高強度密碼建議您讓使用者確認電子郵件 (必須仍需要進行)，並方便他們輕鬆重設 或密碼。

充分運用元素屬性

這裡才有魔法！ 瀏覽器提供多種實用的內建功能，這些功能會使用輸入元素屬性。

確保密碼不外洩，但方便使用者視需要查看

輸入密碼時應使用 type="password"，以便隱藏密碼文字，協助 瀏覽器知道輸入的是密碼。(請注意，瀏覽器會使用 瞭解輸入角色並決定哪些技巧 是否顯示儲存密碼的選項)。

您必須新增「顯示密碼」切換鈕，讓使用者能夠查看 (請記得加入「忘記密碼」連結)。詳情請見 啟用密碼顯示功能。

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

使用 <input type="email"> 為行動裝置使用者提供適當的鍵盤和 在瀏覽器中啟用基本內建電子郵件地址驗證...不使用 JavaScript 必要！

如果您需要使用電話號碼而非電子郵件地址，<input type="tel"> 會啟用行動裝置上的電話撥號鍵盤。您也可以使用 必要時提供 inputmode 屬性：inputmode="numeric" 適合用於 PIN 碼 數字。您過去想知道的一切資訊 inputmode 更多詳細資料

防止行動裝置鍵盤遮住「登入」按鈕

如果不留意，行動鍵盤可能會遮住表單 更糟的是，要遮擋「登入」按鈕。使用者可能會放棄 立即瞭解發生了什麼事

如要避免這種情況，請盡可能只顯示輸入的電子郵件地址/電話號碼和密碼，以及登入頁面頂端的「登入」按鈕。請在下方填入其他內容。

在各種裝置上測試

您必須在各種裝置上針對目標對象進行測試，並調整 。使用 BrowserStack，免費測試開放原始碼 藉此在各種實體裝置上 和瀏覽器

考慮使用兩個頁面

某些網站 (包括 Amazon 和 eBay) 會透過詢問 電子郵件/電話號碼和密碼。這種做法也能簡化 體驗：使用者一次只會處理一項工作

在理想情況下，請使用單一 <form> 實作這個值。使用 JavaScript 一開始只顯示電子郵件輸入內容，然後隱藏並顯示密碼。 若想強制使用者在輸入電子郵件地址後前往新網頁， 第二頁的表單應包含隱藏的輸入元素， 電子郵件值，協助密碼管理工具儲存正確的值。密碼 Chromium 可解讀的表單樣式 提供了程式碼範例

讓使用者不必重新輸入資料

您可以協助瀏覽器正確儲存資料及自動填入輸入內容，讓使用者不 請記得輸入電子郵件地址和密碼的值這點尤其重要 對電子郵件輸入來說更是重要，因為這會獲得高放棄率。

這個部分分為兩個部分：

1. autocomplete、name、id 和 type 屬性可協助瀏覽器瞭解 ，以便儲存稍後用於自動填入的資料。 為允許儲存自動填入資料，新式瀏覽器也需要輸入內容： 具有固定的 name 或 id 值 (不會在每次載入網頁時隨機產生，或 網站部署情形)，而且位在<表單>和 submit 按鈕有關。

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 變化： 「Firefox 的密碼管理員能補強系統經驗法則， 「recipe system」的影片。」

自動填入：網路開發人員應該知道的事情，但 請勿 我們提供了更多有關使用 name 和 autocomplete 的資訊。HTML 規格 會列出所有 59 個可能的值。

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

新式瀏覽器會根據經驗法則，決定何時顯示密碼管理工具 UI 建議一組高強度密碼

以下是 Safari 在電腦上的操作方式。

(從 Safari 12.0 版開始提供不重複的密碼建議)。

內建的瀏覽器密碼產生器可讓使用者和開發人員 計算一組「高強度密碼」不過，無論內部 IP 位址為何 DNS 名稱始終會指向特定的執行個體因為瀏覽器 再視需要自動填入，使用者就不必記住 或輸入密碼鼓勵使用者使用內建瀏覽器 密碼產生器也代表他們更有可能使用 與您網站相關的密碼，降低重複使用密碼的情形 遭到入侵的漏洞

避免使用者意外缺少輸入內容

請同時在電子郵件和密碼欄位中新增 required 屬性。 新式瀏覽器會自動提示及設定缺少的資料重點。 不需要 JavaScript！

專為手指和拇指設計

預設瀏覽器大小，僅適用於輸入元素的所有相關資訊 和按鈕太小，對於行動裝置而言更是如此乍看之下可能很清楚， 登入表單經常發生的問題

確保輸入值和按鈕的大小夠大

在電腦上，輸入和按鈕的預設大小和邊框間距過小； 但在行動裝置上也可能越趨嚴重

根據 Android 協助工具 指南 如果是觸控螢幕物件，建議目標大小為 7 到 10 公釐。Apple 介面 指南建議為 48x48 像素，而 W3C 建議提供至少 44x44 CSS 像素。CANNOT TRANSLATE 請先在輸入元素和按鈕中加入約 15 像素的邊框間距 行動裝置，在桌機上約 10 像素。不妨使用實體行動裝置試用這項功能 實際的手指或指紋這樣一來，你應該就能順利輕觸 輸入內容和按鈕

輕觸目標未設定適當大小 Lighthouse 稽核功能可自動將輸入元素的偵測程序自動化 就太小了

設計：拇指

搜尋「觸控目標」並 就會看到很多前指的圖片不過，實際上 使用者會用大拇指與手機互動。「喜歡」的比例大於 但控制能力較不精確以上皆是 大小的觸控目標

放大文字

如同大小和邊框間距，輸入元素和 按鈕太小，特別是在行動裝置中。

不同平台的瀏覽器調整字型大小的方式不同，因此很難 指定在任何地方都適用的特定字型大小。請填寫這份簡短的問卷調查， 桌機上的熱門網站顯示 13–16 像素的尺寸：符合該實體大小 適合在行動裝置上顯示文字

這表示您需要在行動裝置上使用較大的像素大小：Chrome 上的 16px 電腦雖然清晰可辨，但視力良好，仍難以閱讀 16px 不過 Android 版 Google Chrome 的實際顯示功能您可根據需求設定不同的字型像素大小 使用媒體的可視區域大小 查詢。 「20px」目前可以在行動裝置上使用，但您應和朋友或他一起測試 以及低視能的同事

文件使用的字型大小難以辨識 Lighthouse 稽核功能可自動處理同樣相似的文字， 小型

在輸入內容之間提供足夠空間

加入足夠的邊界，確保輸入值與觸控目標有效。換句話說 大約以一個手指寬度為基準

確認輸入內容清楚可見

輸入內容的預設邊框樣式能讓使用者難以察覺輸入內容。即將完成 不會顯示在部分平台上，例如 Chrome for Android。

除了邊框間距之外，加入邊框：在白色背景上 使用 #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

「無法評估的項目，無法改善」訂閱價格更是如此 以及登入表單您必須設定目標、評估成效及改善網站， 重複執行。

折扣可用性 測試 嘗試變更非常有用，但實際上需要參考實際資料 瞭解使用者如何在註冊和登入表單方面體驗：

• 網頁分析：申請和登入網頁瀏覽次數、跳出率、 和退出
• 互動分析：目標 漏斗 (做法： 使用者會放棄登入或登入流程？) 和 事件 (使用者與表單互動時採取的動作？)
• 網站成效：以使用者為中心 指標 (也就是 表單因為某些原因的執行速度變慢，如果是的話，原因是什麼？)。

以及嘗試導入 A/B 測試 註冊和登入的不同方法，以及階段推出作業，藉此驗證 針對部分使用者套用變更，再對所有使用者發布變更。

一般指南

設計良好的使用者介面和使用者體驗可降低登入表單的放棄率：

• 別讓使用者主動搜尋登入！在頂端放置登入表單連結 使用他們能夠理解的用語，例如「登入」、「建立帳戶」。 或「註冊」。
• 保持專注！申請表單並不是讓學員分心的地方 提供優惠和其他網站功能
• 盡量簡化註冊流程。收集其他使用者資料 (例如地址或 信用卡資料)， 資料。
• 使用者開始填寫註冊表單前，請務必清楚說明服務價值 主張登入帳戶有什麼好處？為使用者提供具體說明 使用者完成註冊的獎勵。
• 盡可能讓使用者透過手機號碼識別自己 而不是電子郵件地址，因為部分使用者可能不會使用電子郵件。
• 讓使用者能輕鬆重設密碼，並將忘記 密碼？連結。
• 服務條款和隱私權政策文件的連結：明確 開始保護使用者的資料。
• 申請時附上貴公司或機構的標誌和名稱，以及 確定所有登入頁面的語言、字型和樣式都符合 你的網站某些表單似乎與其他表單不同 尤其是網址截然不同的內容

持續學習

• 建立令人驚豔的表單
• 製作行動版表單的最佳做法
• 更強大的表單控制項
• 製作無障礙表單
• 使用 Credential Management API 簡化登入流程
• 使用 WebOTP API 驗證網路上的電話號碼

攝影者：Meghan Schiereck 由 Unsplash 提供。