使用跨平台瀏覽器功能建立安全、易於存取且方便使用的登入表單。
如果使用者需要登入您的網站,最好的登入表單設計是 而且極為重要尤其是當網路連線品質不佳、使用行動裝置或來自行動裝置 時間緊迫,或是處於壓力之中。設計不良的登入表單會導致跳出率偏高。 每次跳出可能都代表使用者已流失而失望,而不只是錯過登入的使用者 商機。
以下是簡單的登入表單範例,其中展示了所有最佳做法:
檢查清單
- 使用有意義的 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 團隊的設計 研究 可讓使用者加快掃描速度。您能取得完整寬度標籤和輸入內容 不必配合標籤文字調整標籤和輸入寬度
![螢幕截圖:顯示行動裝置上的表單輸入標籤位置:輸入項目旁和輸入內容上方。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-showing-form-i-8eaa2616f31e3.png?authuser=19&hl=zh-tw)
開啟任一部裝置上的標籤位置圖示 使用行動裝置查看自己
使用 <button>
使用 <button>
查看按鈕!按鈕元素提供無障礙行為和內建表單
提交功能,並設定樣式。事實上
使用 <div>
或其他偽裝成按鈕的元素。
確保提交按鈕顯示其功能。例如「建立帳戶」、 登入,而非「提交」或「開始」。
確認成功提交表單
協助密碼管理員瞭解已提交表單。這裡共有兩個 做法如下:
- 前往其他頁面。
- 使用
History.pushState()
或History.replaceState()
模擬導航。 並移除密碼表單。
提出 XMLHttpRequest
或 fetch
要求時,確認登入成功:
回應中所述的回應,並藉由擷取 DOM 形式處理
用來向使用者表示成功
建議在使用者輕觸或點選「登入」按鈕後停用 基礎架構使用者多次按下按鈕 即使是速度飛快、反應靈敏的網站也沒問題。這會拖慢互動速度 程式碼會增加到伺服器負載
相反地,請只在使用者輸入內容時才停用表單提交功能。例如: 如果使用者尚未輸入客戶,請勿停用「登入」按鈕 PIN 碼。使用者可能會遺漏表單內容,試著重複輕觸 (已停用) [登入] 按鈕,且認為該功能無法運作。至少 您必須停用表單提交功能,然後向使用者說明 請點選已停用的按鈕
請勿重複輸入
有些網站會強制使用者輸入電子郵件地址或密碼兩次。這可能會減少 只對少數使用者發生錯誤,但會導致「所有」使用者受到額外作業, 放棄 費率。 重複提問兩次也沒有瀏覽器會在哪些情況下自動填入電子郵件地址。 建議高強度密碼建議您讓使用者確認電子郵件 (必須仍需要進行),並方便他們輕鬆重設 或密碼。
充分運用元素屬性
這裡才有魔法! 瀏覽器提供多種實用的內建功能,這些功能會使用輸入元素屬性。
確保密碼不外洩,但方便使用者視需要查看
輸入密碼時應使用 type="password"
,以便隱藏密碼文字,協助
瀏覽器知道輸入的是密碼。(請注意,瀏覽器會使用
瞭解輸入角色並決定哪些技巧
是否顯示儲存密碼的選項)。
您必須新增「顯示密碼」切換鈕,讓使用者能夠查看 (請記得加入「忘記密碼」連結)。詳情請見 啟用密碼顯示功能。
![顯示密碼圖示的 Google 登入表單。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/google-sign-form-showing-c9486bea5e685.png?authuser=19&hl=zh-tw)
為行動裝置使用者提供合適的鍵盤
使用 <input type="email">
為行動裝置使用者提供適當的鍵盤和
在瀏覽器中啟用基本內建電子郵件地址驗證...不使用 JavaScript
必要!
如果您需要使用電話號碼而非電子郵件地址,<input
type="tel">
會啟用行動裝置上的電話撥號鍵盤。您也可以使用
必要時提供 inputmode
屬性:inputmode="numeric"
適合用於 PIN 碼
數字。您過去想知道的一切資訊
inputmode
更多詳細資料
防止行動裝置鍵盤遮住「登入」按鈕
如果不留意,行動鍵盤可能會遮住表單 更糟的是,要遮擋「登入」按鈕。使用者可能會放棄 立即瞭解發生了什麼事
![兩張 Android 手機的登入表單螢幕截圖:一張顯示手機鍵盤如何遮蓋「提交」按鈕。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/two-screenshots-a-sign-084751e480027.png?authuser=19&hl=zh-tw)
如要避免這種情況,請盡可能只顯示輸入的電子郵件地址/電話號碼和密碼,以及登入頁面頂端的「登入」按鈕。請在下方填入其他內容。
![Android 手機的登入表單螢幕截圖:登入按鈕受到手機鍵盤遮擋。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-83485069857ef.png?authuser=19&hl=zh-tw)
在各種裝置上測試
您必須在各種裝置上針對目標對象進行測試,並調整 。使用 BrowserStack,免費測試開放原始碼 藉此在各種實體裝置上 和瀏覽器
![iPhone 7、8 和 11 上的登入表單螢幕截圖。在 iPhone 7 和 8 上,「登入」按鈕會遭到手機鍵盤遮住,但 iPhone 11 不會顯示](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshots-a-sign-form-7ab582516302b.png?authuser=19&hl=zh-tw)
考慮使用兩個頁面
某些網站 (包括 Amazon 和 eBay) 會透過詢問 電子郵件/電話號碼和密碼。這種做法也能簡化 體驗:使用者一次只會處理一項工作
![Amazon 網站的登入表單螢幕截圖,分別位於兩個不同「頁面」的電子郵件/電話號碼和密碼。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-ade5c293b1904.png?authuser=19&hl=zh-tw)
在理想情況下,請使用單一 <form> 實作這個值。使用 JavaScript 一開始只顯示電子郵件輸入內容,然後隱藏並顯示密碼。 若想強制使用者在輸入電子郵件地址後前往新網頁, 第二頁的表單應包含隱藏的輸入元素, 電子郵件值,協助密碼管理工具儲存正確的值。密碼 Chromium 可解讀的表單樣式 提供了程式碼範例
讓使用者不必重新輸入資料
您可以協助瀏覽器正確儲存資料及自動填入輸入內容,讓使用者不 請記得輸入電子郵件地址和密碼的值這點尤其重要 對電子郵件輸入來說更是重要,因為這會獲得高放棄率。
這個部分分為兩個部分:
autocomplete
、name
、id
和type
屬性可協助瀏覽器瞭解 ,以便儲存稍後用於自動填入的資料。 為允許儲存自動填入資料,新式瀏覽器也需要輸入內容: 具有固定的name
或id
值 (不會在每次載入網頁時隨機產生,或 網站部署情形),而且位在<表單>和submit
按鈕有關。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 以上版本中,在電腦上, 例如密碼管理工具,然後依序顯示 驗證 (指紋或臉部辨識) 驗證 (如果有的話)。
![電腦版 Safari 的三個登入程序螢幕截圖:密碼管理工具、生物特徵辨識驗證、自動填入。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshots-three-stages-b113ab6379e04.png?authuser=19&hl=zh-tw)
Chrome 電腦版會顯示電子郵件建議、顯示密碼管理工具,並自動填入密碼。
![電腦版 Chrome 登入程序的四個階段螢幕截圖:電子郵件填寫、電子郵件建議、密碼管理工具、選取時自動自動填入。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshots-four-stages-da9ebdff879c3.png?authuser=19&hl=zh-tw)
瀏覽器密碼和自動填入系統並不容易。模型的演算法 猜測、儲存及顯示值並未標準化,而且會與 整個平台例如,Hidde de 變化: 「Firefox 的密碼管理員能補強系統經驗法則, 「recipe system」的影片。」
自動填入:網路開發人員應該知道的事情,但
請勿
我們提供了更多有關使用 name
和 autocomplete
的資訊。HTML
規格
會列出所有 59 個可能的值。
允許瀏覽器提供高強度密碼建議
新式瀏覽器會根據經驗法則,決定何時顯示密碼管理工具 UI 建議一組高強度密碼
以下是 Safari 在電腦上的操作方式。
![電腦上的 Firefox 密碼管理工具螢幕截圖。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-firefox-passw-00fc03de0450e.png?authuser=19&hl=zh-tw)
(從 Safari 12.0 版開始提供不重複的密碼建議)。
內建的瀏覽器密碼產生器可讓使用者和開發人員 計算一組「高強度密碼」不過,無論內部 IP 位址為何 DNS 名稱始終會指向特定的執行個體因為瀏覽器 再視需要自動填入,使用者就不必記住 或輸入密碼鼓勵使用者使用內建瀏覽器 密碼產生器也代表他們更有可能使用 與您網站相關的密碼,降低重複使用密碼的情形 遭到入侵的漏洞
避免使用者意外缺少輸入內容
請同時在電子郵件和密碼欄位中新增 required
屬性。
新式瀏覽器會自動提示及設定缺少的資料重點。
不需要 JavaScript!
![桌面版 Firefox 和 Android 版 Google Chrome 的螢幕截圖,顯示「請填寫這個欄位」提示缺少資料](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-desktop-firef-eb20cb4ab2ed6.png?authuser=19&hl=zh-tw)
專為手指和拇指設計
預設瀏覽器大小,僅適用於輸入元素的所有相關資訊 和按鈕太小,對於行動裝置而言更是如此乍看之下可能很清楚, 登入表單經常發生的問題
確保輸入值和按鈕的大小夠大
在電腦上,輸入和按鈕的預設大小和邊框間距過小; 但在行動裝置上也可能越趨嚴重
![Chrome 電腦版和 Android 版 Chrome 中未設定樣式的螢幕截圖。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-unstyled-form-ddf413b33ec2b.png?authuser=19&hl=zh-tw)
根據 Android 協助工具 指南 如果是觸控螢幕物件,建議目標大小為 7 到 10 公釐。Apple 介面 指南建議為 48x48 像素,而 W3C 建議提供至少 44x44 CSS 像素。CANNOT TRANSLATE 請先在輸入元素和按鈕中加入約 15 像素的邊框間距 行動裝置,在桌機上約 10 像素。不妨使用實體行動裝置試用這項功能 實際的手指或指紋這樣一來,你應該就能順利輕觸 輸入內容和按鈕
輕觸目標未設定適當大小 Lighthouse 稽核功能可自動將輸入元素的偵測程序自動化 就太小了
設計:拇指
搜尋「觸控目標」並 就會看到很多前指的圖片不過,實際上 使用者會用大拇指與手機互動。「喜歡」的比例大於 但控制能力較不精確以上皆是 大小的觸控目標
放大文字
如同大小和邊框間距,輸入元素和 按鈕太小,特別是在行動裝置中。
![電腦版和 Android 版 Chrome 中未設定樣式的螢幕截圖。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-unstyled-form-e9a00e9267421.png?authuser=19&hl=zh-tw)
不同平台的瀏覽器調整字型大小的方式不同,因此很難 指定在任何地方都適用的特定字型大小。請填寫這份簡短的問卷調查, 桌機上的熱門網站顯示 13–16 像素的尺寸:符合該實體大小 適合在行動裝置上顯示文字
這表示您需要在行動裝置上使用較大的像素大小:Chrome 上的 16px
電腦雖然清晰可辨,但視力良好,仍難以閱讀 16px
不過 Android 版 Google Chrome 的實際顯示功能您可根據需求設定不同的字型像素大小
使用媒體的可視區域大小
查詢。
「20px
」目前可以在行動裝置上使用,但您應和朋友或他一起測試
以及低視能的同事
文件使用的字型大小難以辨識 Lighthouse 稽核功能可自動處理同樣相似的文字, 小型。
在輸入內容之間提供足夠空間
加入足夠的邊界,確保輸入值與觸控目標有效。換句話說 大約以一個手指寬度為基準
確認輸入內容清楚可見
輸入內容的預設邊框樣式能讓使用者難以察覺輸入內容。即將完成 不會顯示在部分平台上,例如 Chrome for Android。
除了邊框間距之外,加入邊框:在白色背景上
使用 #ccc
或更暗。
![Android 版 Chrome 中的樣式化表單螢幕截圖。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-styled-form-e2baf84fd81fe.png?authuser=19&hl=zh-tw)
使用內建的瀏覽器功能,在輸入無效值時發出警告
瀏覽器內建功能,可針對使用
type
屬性。如果您提交的表單含有無效的值,瀏覽器就會發出警告。
並將重點放在有問題的輸入內容
![Chrome 電腦版登入表單的螢幕截圖,顯示瀏覽器提示和焦點無效的電子郵件地址值。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-4a4d1d374a2a8.png?authuser=19&hl=zh-tw)
您可以使用 :invalid
CSS 選取器來醒目顯示無效的資料。使用
:not(:placeholder-shown)
,避免選取沒有內容的輸入內容。
input[type=email]:not(:placeholder-shown):invalid {
color: red;
outline-color: red;
}
嘗試以不同方式醒目顯示含有無效值的輸入內容。
視需要使用 JavaScript
切換密碼顯示設定
您必須新增「顯示密碼」切換鈕,讓使用者能夠查看 而不是他們輸入的文字可用性 當使用者處於離線狀態時 但無法看到他們輸入的文字。目前沒有內建方法 但我們的計畫 。您 必須改用 JavaScript
![顯示「顯示密碼」切換和「忘記密碼」連結的 Google 登入表單。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/sign-in-form.png?authuser=19&hl=zh-tw)
下列程式碼使用文字按鈕新增「顯示密碼」功能。
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.');
}
}
以下是最終結果:
![登入表單的螢幕截圖,顯示密碼文字「按鈕」、Mac 的 Safari 和 iPhone 7 使用者。](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshots-sign-form-61274420cf598.png?authuser=19&hl=zh-tw)
開放使用密碼輸入功能
使用 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 提供。