本程式碼研究室將說明如何建構安全、容易存取且易於使用的登入表單。
1. 使用有意義的 HTML
請使用下列為工作建構的元素:
<form>
<section>
<label>
<button>
如您所見,這些元素會啟用瀏覽器內建的瀏覽器功能、提高無障礙程度,並為您的標記添加意義。
按一下「Remix」即可編輯,讓專案變成可編輯狀態。
將下列程式碼加入
<body>
元素:<form action="#" method="post"> <h1>Sign in</h1> <section> <label>Email</label> <input> </section> <section> <label>Password</label> <input> </section> <button>Sign in</button> </form>
此時,
index.html
檔案應如下所示:按一下「查看應用程式」即可預覽登入表單。您新增的 HTML 有效且正確,但預設的瀏覽器樣式設定會讓應用程式看起來很糟糕且不易使用,特別是在行動裝置上。
按一下「檢視原始碼」,返回原始碼。
2. 專為手指和拇指設計
調整邊框間距、邊界和字型大小,確保你輸入的內容適合在行動裝置上顯示。
複製下列 CSS 並貼到
style.css
檔案中:按一下「查看應用程式」,即可查看新樣式的登入表單。
按一下「View Source」,返回
style.css
檔案。
這包含大量程式碼!需要注意的重點事項如下:
- 將
padding
和margin
新增至輸入內容。 font-size
有別於行動裝置和電腦。
:invalid
選取器可用來表示輸入內容的值無效。目前還無法使用,
CSS 版面配置為行動裝置優先:
- 預設 CSS 適用於寬度小於 450 像素的可視區域。
- 媒體查詢部分會為寬度至少 450 像素的可視區域設定覆寫值。
依上述方式建構自己的表單時,此時務必在電腦和行動裝置上測試實際程式碼:
- 標籤和輸入文字是否清晰易讀,尤其是低視能人士?
- 輸入和「登入」按鈕是否夠大,可當做觸控目標使用?
3. 新增輸入屬性以啟用內建瀏覽器功能
允許瀏覽器儲存及自動填入輸入值,並提供內建密碼管理功能的存取權。
在表單 HTML 中新增屬性,如下所示:
<form action="#" method="post"> <h1>Sign in</h1> <section> <label for="email">Email</label> <input id="email" name="email" type="email" autocomplete="username" required autofocus> </section> <section> <label for="password">Password</label> <input id="password" name="password" type="password" autocomplete="current-password" required> </section> <button id="sign-in">Sign in</button> </form>
再次查看應用程式,然後按一下「電子郵件」。
請留意焦點如何移至電子郵件輸入區塊。這是因為標籤與透過
for="email"
屬性的輸入內容建立關聯。當標籤或標籤的輸入內容處於焦點時,螢幕閱讀器也會朗讀標籤文字。將焦點移至行動裝置的電子郵件輸入欄位。
注意:使用鍵盤最佳化輸入電子郵件地址的方式。舉例來說,主鍵盤可能會顯示
@
和.
字元,作業系統則可能會在鍵盤上方顯示儲存的電子郵件。這些情況的原因在於type="email"
屬性會套用至<input>
元素。在密碼輸入欄位輸入文字。
由於「
type="password"
」屬性已套用至元素,因此文字會預設為隱藏。
autocomplete
、name
、id
和type
屬性可協助瀏覽器瞭解輸入的角色,以便儲存資料,以便之後用於自動填入。
- 將焦點放在電腦裝置上的電子郵件輸入內容,並輸入文字。
如要查看應用程式的網址,請點選「全螢幕」圖示 。如果您在瀏覽器中儲存了任何電子郵件地址,系統可能會顯示對話方塊,讓您選取已儲存的電子郵件。這是因為
autocomplete="username"
屬性套用至電子郵件輸入。
autocomplete="username"
和autocomplete="current-password"
可協助瀏覽器使用儲存的值自動填入輸入內容。
不同的瀏覽器會使用不同技術來解讀表單輸入的角色,並為不同的網站提供自動填入功能。
如要自行嘗試,請新增或移除屬性。
測試不同平台的行為極為重要。請務必輸入值,然後使用不同裝置的瀏覽器提交表單。您可以使用 BrowserStack 輕鬆在多種平台上進行測試,開放原始碼專案可免費使用。試試看!
此時,index.html
檔案應如下所示:
4. 新增切換密碼顯示方式的 UI
可用性專家強烈建議新增圖示或按鈕,方便使用者查看自己在「密碼」欄位輸入的文字。內建無法執行上述動作的機制,因此您需要透過 JavaScript 自行導入。
新增這項功能的程式碼非常簡單。這個範例使用的是文字,而非圖示。
依照下列方式更新 index.html
、style.css
和 script.js
檔案。
在
index.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 加到
style.css
檔案的底部:button#toggle-password { background: none; border: none; cursor: pointer; font-weight: 300; padding: 0; position: absolute; top: -4px; right: -2px; }
如此一來,「顯示密碼」按鈕看起來就會像是純文字,並且顯示在密碼部分的右上角。
將下列 JavaScript 新增至
script.js
檔案,即可切換密碼顯示方式,並設定適當的aria-label
: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.'); } }
立即試用顯示密碼邏輯。
- 查看應用程式。
- 在密碼欄位中輸入一些文字。
- 按一下「顯示密碼」。
在不同作業系統上的多個瀏覽器中重複執行第四步驟。
根據使用者體驗的設計:使用者是否會注意到「顯示密碼」並瞭解該密碼?有更好的方式可以提供這項功能嗎?我們正努力與少數朋友或同事進行折扣可用性測試。
如要瞭解這項功能在螢幕閱讀器上的運作方式,請安裝 ChromeVox 傳統版擴充功能並瀏覽表單。aria-label
值是否正常運作?
部分網站 (例如 Gmail) 會使用圖示而非文字來切換顯示密碼。完成本程式碼研究室後,請使用 SVG 圖片實作這個程式碼研究室。Material Design 提供可免費下載的優質圖示。
此時,程式碼應如下所示:
5. 新增表單驗證
讓使用者在提交表單前驗證資料,以及讓他們知道需要修改的內容,您就能協助他們正確輸入資料。
HTML 表單元素和屬性具有基本驗證的內建功能,但建議您也在使用者輸入資料和嘗試提交表單時,運用 JavaScript 執行更強大的驗證。
這個步驟會使用 Constraint Validation API (廣泛支援),透過內建瀏覽器 UI 新增自訂驗證,以設定聚焦並顯示提示。
告知使用者密碼和任何其他輸入內容的限制。因此,請勿猜測他們是誰!
更新
index.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" aria-describedby="password-constraints" required> <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div> </section>
這會新增兩項功能:
- 密碼限制相關資訊
- 密碼輸入內容的
aria-describedby
屬性 (螢幕閱讀器會讀出標籤文字、輸入類型 (密碼) 和說明。
將下列 CSS 加到
style.css
檔案的底部:div#password-constraints { margin: 5px 0 0 0; font-size: 16px; }
將下列 JavaScript 新增至
script.js
檔案:passwordInput.addEventListener('input', resetCustomValidity); function resetCustomValidity() { passwordInput.setCustomValidity(''); } // A production site would use more stringent password testing. function validatePassword() { let message= ''; if (!/.{8,}/.test(passwordInput.value)) { message = 'At least eight characters. '; } if (!/.*[A-Z].*/.test(passwordInput.value)) { message += 'At least one uppercase letter. '; } if (!/.*[a-z].*/.test(passwordInput.value)) { message += 'At least one lowercase letter.'; } passwordInput.setCustomValidity(message); } const form = document.querySelector('form'); const signinButton = document.querySelector('button#sign-in'); form.addEventListener('submit', handleFormSubmission); function handleFormSubmission(event) { event.preventDefault(); validatePassword(); form.reportValidity(); if (form.checkValidity() === false) { } else { // On a production site do form submission. alert('Logging in!') signinButton.disabled = 'true'; } }
點選此按鈕即可體驗這項功能,
新版瀏覽器所有新版瀏覽器均內建表單驗證功能,並支援 JavaScript 驗證。
- 輸入無效的電子郵件地址,然後按一下「登入」。瀏覽器會顯示警告,無需啟用 JavaScript!
- 輸入有效的電子郵件地址,但點按「登入」(不必設定密碼值)。瀏覽器會發出警告,指出您缺少必要的值,並聚焦於輸入密碼。
- 輸入無效的密碼,然後按一下「登入」。現在會根據問題顯示不同的訊息。
嘗試協助使用者輸入電子郵件地址和密碼,請改用其他方式。改善密碼表單欄位可以提供實用的建議。
此時,程式碼應如下所示:
進一步探索
但不會顯示在本程式碼研究室中,但您仍需要下列四個重要的登入表單功能:
新增「忘記密碼?」按鈕,讓使用者輕鬆重設密碼。
提供服務條款和隱私權政策文件的連結,方便使用者瞭解您如何保護他們的資料。
考慮設計風格和品牌,並確保這些額外功能與網站上的其他特色相輔相成。
新增 Analytics (分析) 和 RUM,以便測試及監控表單設計的成效和可用性。