使用跨平台瀏覽器功能建立登入表單

山姆.杜頓

本程式碼研究室將說明如何建構安全、容易存取且易於使用的登入表單。

1. 使用有意義的 HTML

請使用下列為工作建構的元素：

  • <form>
  • <section>
  • <label>
  • <button>

如您所見，這些元素會啟用瀏覽器內建的瀏覽器功能、提高無障礙程度，並為您的標記添加意義。

  1. 按一下「Remix」即可編輯，讓專案變成可編輯狀態。

  2. 將下列程式碼加入 <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 檔案應如下所示：

  3. 按一下「查看應用程式」即可預覽登入表單。您新增的 HTML 有效且正確，但預設的瀏覽器樣式設定會讓應用程式看起來很糟糕且不易使用，特別是在行動裝置上。

  4. 按一下「檢視原始碼」，返回原始碼。

2. 專為手指和拇指設計

調整邊框間距、邊界和字型大小，確保你輸入的內容適合在行動裝置上顯示。

  1. 複製下列 CSS 並貼到 style.css 檔案中：

  2. 按一下「查看應用程式」，即可查看新樣式的登入表單。

  3. 按一下「View Source」，返回 style.css 檔案。

這包含大量程式碼！需要注意的重點事項如下：

  • 將 padding 和 margin 新增至輸入內容。
  • font-size 有別於行動裝置和電腦。

:invalid 選取器可用來表示輸入內容的值無效。目前還無法使用，

CSS 版面配置為行動裝置優先：

  • 預設 CSS 適用於寬度小於 450 像素的可視區域。
  • 媒體查詢部分會為寬度至少 450 像素的可視區域設定覆寫值。

依上述方式建構自己的表單時，此時務必在電腦和行動裝置上測試實際程式碼：

  • 標籤和輸入文字是否清晰易讀，尤其是低視能人士？
  • 輸入和「登入」按鈕是否夠大，可當做觸控目標使用？

3. 新增輸入屬性以啟用內建瀏覽器功能

允許瀏覽器儲存及自動填入輸入值，並提供內建密碼管理功能的存取權。

  1. 在表單 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>

  2. 再次查看應用程式，然後按一下「電子郵件」。

    請留意焦點如何移至電子郵件輸入區塊。這是因為標籤與透過 for="email" 屬性的輸入內容建立關聯。當標籤或標籤的輸入內容處於焦點時，螢幕閱讀器也會朗讀標籤文字。

  3. 將焦點移至行動裝置的電子郵件輸入欄位。

    注意：使用鍵盤最佳化輸入電子郵件地址的方式。舉例來說，主鍵盤可能會顯示 @ 和 . 字元，作業系統則可能會在鍵盤上方顯示儲存的電子郵件。這些情況的原因在於 type="email" 屬性會套用至 <input> 元素。

    iOS 裝置的預設電子郵件鍵盤。

  4. 在密碼輸入欄位輸入文字。

    由於「type="password"」屬性已套用至元素，因此文字會預設為隱藏。

  • autocomplete、name、id 和 type 屬性可協助瀏覽器瞭解輸入的角色，以便儲存資料，以便之後用於自動填入。
  1. 將焦點放在電腦裝置上的電子郵件輸入內容，並輸入文字。 如要查看應用程式的網址，請點選「全螢幕」圖示 全螢幕圖示。如果您在瀏覽器中儲存了任何電子郵件地址，系統可能會顯示對話方塊，讓您選取已儲存的電子郵件。這是因為 autocomplete="username" 屬性套用至電子郵件輸入。
  • autocomplete="username" 和 autocomplete="current-password" 可協助瀏覽器使用儲存的值自動填入輸入內容。

不同的瀏覽器會使用不同技術來解讀表單輸入的角色，並為不同的網站提供自動填入功能。

如要自行嘗試，請新增或移除屬性。

測試不同平台的行為極為重要。請務必輸入值，然後使用不同裝置的瀏覽器提交表單。您可以使用 BrowserStack 輕鬆在多種平台上進行測試，開放原始碼專案可免費使用。試試看！

此時，index.html 檔案應如下所示：

4. 新增切換密碼顯示方式的 UI

可用性專家強烈建議新增圖示或按鈕，方便使用者查看自己在「密碼」欄位輸入的文字。內建無法執行上述動作的機制，因此您需要透過 JavaScript 自行導入。

新增這項功能的程式碼非常簡單。這個範例使用的是文字，而非圖示。

依照下列方式更新 index.html、style.css 和 script.js 檔案。

  1. 在 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>

  2. 將下列 CSS 加到 style.css 檔案的底部：

    button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

    如此一來，「顯示密碼」按鈕看起來就會像是純文字，並且顯示在密碼部分的右上角。

  3. 將下列 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.');
  }
}

  4. 立即試用顯示密碼邏輯。

    1. 查看應用程式。

    2. 在密碼欄位中輸入一些文字。

    3. 按一下「顯示密碼」。

  5. 在不同作業系統上的多個瀏覽器中重複執行第四步驟。

根據使用者體驗的設計：使用者是否會注意到「顯示密碼」並瞭解該密碼？有更好的方式可以提供這項功能嗎？我們正努力與少數朋友或同事進行折扣可用性測試。

如要瞭解這項功能在螢幕閱讀器上的運作方式，請安裝 ChromeVox 傳統版擴充功能並瀏覽表單。aria-label 值是否正常運作？

部分網站 (例如 Gmail) 會使用圖示而非文字來切換顯示密碼。完成本程式碼研究室後，請使用 SVG 圖片實作這個程式碼研究室。Material Design 提供可免費下載的優質圖示。

此時，程式碼應如下所示：

5. 新增表單驗證

讓使用者在提交表單前驗證資料，以及讓他們知道需要修改的內容，您就能協助他們正確輸入資料。

HTML 表單元素和屬性具有基本驗證的內建功能，但建議您也在使用者輸入資料和嘗試提交表單時，運用 JavaScript 執行更強大的驗證。

這個步驟會使用 Constraint Validation API (廣泛支援)，透過內建瀏覽器 UI 新增自訂驗證，以設定聚焦並顯示提示。

告知使用者密碼和任何其他輸入內容的限制。因此，請勿猜測他們是誰！

  1. 更新 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 屬性 (螢幕閱讀器會讀出標籤文字、輸入類型 (密碼) 和說明。

  1. 將下列 CSS 加到 style.css 檔案的底部：

    div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

  2. 將下列 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';
  }
}

  3. 點選此按鈕即可體驗這項功能，

    新版瀏覽器所有新版瀏覽器均內建表單驗證功能，並支援 JavaScript 驗證。

    1. 輸入無效的電子郵件地址，然後按一下「登入」。瀏覽器會顯示警告，無需啟用 JavaScript！

    2. 輸入有效的電子郵件地址，但點按「登入」(不必設定密碼值)。瀏覽器會發出警告，指出您缺少必要的值，並聚焦於輸入密碼。

    3. 輸入無效的密碼，然後按一下「登入」。現在會根據問題顯示不同的訊息。

  4. 嘗試協助使用者輸入電子郵件地址和密碼，請改用其他方式。改善密碼表單欄位可以提供實用的建議。

    此時，程式碼應如下所示：

進一步探索

但不會顯示在本程式碼研究室中，但您仍需要下列四個重要的登入表單功能：

  • 新增「忘記密碼？」按鈕，讓使用者輕鬆重設密碼。

  • 提供服務條款和隱私權政策文件的連結，方便使用者瞭解您如何保護他們的資料。

  • 考慮設計風格和品牌，並確保這些額外功能與網站上的其他特色相輔相成。

  • 新增 Analytics (分析) 和 RUM，以便測試及監控表單設計的成效和可用性。