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

Sam Dutton

本程式碼研究室會說明如何建構安全、無障礙且易於使用的登入表單。

1. 使用有意義的 HTML

請使用為工作建立的這些元素：

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

您會發現，這些元素可啟用內建瀏覽器功能、改善無障礙性，並為標記新增意義。

  1. 按一下「Remix to edit」即可編輯專案。

  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. 按一下「View Source」即可返回原始碼。

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. 在 style.css 檔案底部加入下列 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. 在不同作業系統的多個瀏覽器上重複執行第四步驟。

請思考 UX 設計：使用者會注意到「顯示密碼」並理解其意義嗎？是否有更好的方式提供這項功能？這時不妨試著與一小群朋友或同事進行簡易可用性測試。

如要瞭解這項功能如何在螢幕閱讀器中運作，請安裝 ChromeVox Classic 擴充功能，然後瀏覽表單。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. 在 style.css 檔案底部加入下列 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，以便測試及監控表單設計的成效和可用性。