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

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

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

  • <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 檔案。

這裡有大量程式碼!主要需要注意的是尺寸變更:

  • 已將 paddingmargin 新增至輸入內容。
  • 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" 屬性已套用至元素,因此文字預設為隱藏狀態。

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

不同瀏覽器會使用不同的技術來判斷表單輸入內容的角色,並為各種網站提供自動填入功能。

新增及移除屬性,親自試試看。

測試跨平台行為非常重要。您應在不同裝置的不同瀏覽器中輸入值並提交表單。您可以輕鬆在各種平台上使用 BrowserStack 進行測試,開放原始碼專案可免費使用。試試看!

此時,您的 index.html 檔案應如下所示:

4. 新增 UI 來切換密碼顯示設定

可用性專家強烈建議您加入圖示或按鈕,讓使用者能夠查看自己在「密碼」欄位中輸入的文字。沒有內建方式可執行此操作,因此您必須自行使用 JavaScript 實作。

新增這項功能的程式碼很簡單。本範例使用文字,而非圖示。

更新 index.htmlstyle.cssscript.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,以便測試及監控表單設計的成效和可用性。