註冊表單最佳做法程式碼研究室

Sam Dutton

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

步驟 1：使用有意義的 HTML

在這個步驟中，您將瞭解如何使用表單元素充分運用內建的瀏覽器功能。

  • 按一下「Remix to Edit」，即可編輯專案。

請查看 index.html 中的表單 HTML。即可輸入名稱、電子郵件地址和密碼每個項目都位於一個區段中，且各自有標籤。「Sign up」按鈕是… <button>！在本程式碼研究室的後續內容中，您將瞭解所有這些元素的特殊功能。

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

按一下「查看應用程式」即可預覽申請表。這表示除了預設瀏覽器樣式以外，其他沒有 CSS 的表單外觀。

  • 預設樣式看起來可以嗎？您會如何調整表單，讓它看起來更美觀？
  • 預設樣式是否運作正常？使用現有表單時可能會遇到哪些問題？行動版 YouTube 呢？螢幕閱讀器或其他輔助技術又如何？
  • 您的使用者是誰？您鎖定的裝置和瀏覽器為何？

測試表單

您可以購買大量硬體並設定裝置實驗室，但其實還有更便宜、更簡單的方法，可在各種瀏覽器、平台和裝置上試用表單：

按一下「查看應用程式」即可預覽註冊表單。

  • 使用 Chrome 開發人員工具裝置模式在不同裝置上試用表單。
  • 接著，請在手機或其他實際裝置上開啟表單。你發現哪些差異？

步驟 2：新增 CSS 改善表單運作

按一下「View Source」即可返回原始碼。

目前 HTML 沒有任何問題，但您需要確保表單可在行動裝置和電腦上正常運作，並適合各種使用者。

在這個步驟中，您將新增 CSS，讓表單更容易使用。

複製並貼上以下所有 CSS 至 css/main.css 檔案：

按一下「View App」，即可查看樣式設定的註冊表單。接著，按一下「View Source」即可返回 css/main.css。

  • 這段 CSS 是否適用於各種瀏覽器和螢幕尺寸？

  • 請根據測試裝置調整 padding、margin 和 font-size。

  • CSS 是行動版內容優先。媒體查詢可用於對寬度至少為 400px 的可視區域套用 CSS 規則，寬度至少為 500px 的可視區域再次套用 CSS 規則。這些中斷點是否足夠？如何選擇表單的中斷點？

步驟 3：新增屬性，協助使用者輸入資料

在這個步驟中，您會在輸入元素中新增屬性，讓瀏覽器儲存及自動填入表單欄位值，並在欄位缺少資料或資料無效時發出警告。

更新 index.html 檔案，讓表單程式碼如下所示：

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

type 值的用途廣泛：* type="password" 會在輸入時模糊處理文字，並讓瀏覽器的密碼管理工具建議高強度密碼。* type="email" 提供基本驗證功能，確保行動使用者能取得適當的鍵盤。快來試試看！

依序按一下「查看應用程式」和「電子郵件」標籤。會發生什麼情況？由於標籤的 for 值與電子郵件輸入內容的 id 相符，因此焦點會移至電子郵件輸入內容。其他標籤和輸入內容的運作方式相同。當標籤 (或標籤的相關輸入內容) 獲得焦點時，螢幕閱讀器也會朗讀標籤文字。你可以試著使用 ChromeVox 擴充功能。

請嘗試提交空白欄位的表單。瀏覽器不會提交表單，並會提示您填入缺少的資料，並設定焦點。這是因為您已在所有輸入內容中加入 require 屬性。現在請嘗試提交長度少於 8 個字元的密碼。瀏覽器會警告使用者密碼長度適中，並因為 minlength="8" 屬性，將焦點放在密碼輸入欄位。pattern (用於名稱輸入) 和其他驗證限制也適用相同的做法。瀏覽器會自動執行上述所有操作，無需任何額外的程式碼。

使用 autocomplete 值 name 做為「Full name」輸入值是合理的，但其他輸入值呢？* autocomplete="username" 代表「電子郵件」輸入內容，表示瀏覽器的密碼管理工具會將電子郵件地址儲存為此使用者的「名稱」(即使用者名稱)，並與密碼搭配使用。* autocomplete="new-password" 是 密碼的提示，可讓密碼管理工具提供將這個值儲存為目前網站密碼的選項。接著，您可以使用 autocomplete="current-password" 在登入表單中啟用自動填入功能 (請注意，這是註冊表單)。

步驟 4：協助使用者輸入安全密碼

在表單的現況下，你是否發現密碼輸入有任何問題？

有兩個問題： * 無法得知密碼值是否有限制。* 您無法查看密碼，因此無法確認密碼是否正確。

不要讓使用者猜測！

使用下列程式碼更新 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="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

這項功能新增了可協助使用者輸入密碼的新功能：

  • 切換密碼顯示狀態的按鈕 (實際上只是文字)。(按鈕功能會透過 JavaScript 新增)。
  • 密碼切換按鈕的 aria-label 屬性。
  • 密碼輸入欄位的 aria-describedby 屬性。螢幕閱讀器會讀取標籤文字、輸入類型 (密碼)，然後讀取說明。

如要啟用密碼切換按鈕，並向使用者顯示密碼限制相關資訊，請複製下方的所有 JavaScript，然後貼到您自己的 js/main.js 檔案中。

(步驟 2 已置入了 CSS，請查看密碼切換按鈕的樣式和位置。)

  • 圖示是否比文字更適合用來切換密碼顯示功能？請嘗試與一小群朋友或同事進行折扣可用性測試。

  • 如要體驗螢幕閱讀器如何與表單互動，請安裝 ChromeVox 擴充功能，然後瀏覽表單。請問你能否只使用 ChromeVox 填寫表單？如果不是，你會改變什麼？

此時，表單應如下所示：

進一步

本程式碼研究室未涵蓋幾項重要功能：

  • 檢查是否有遭外洩的密碼。請勿允許使用遭到入侵的密碼。您可以 (且應) 使用密碼檢查服務，找出遭到盜用的密碼。您可以使用現有服務，也可以在自己的伺服器上自行執行服務。快試試看吧！在表單中加入密碼檢查功能

  • 請提供《服務條款》和隱私權政策文件的連結：讓使用者清楚瞭解您如何保護他們的資料。

  • 樣式與品牌：請確保這些項目與網站的其他部分相符。輸入姓名和地址及付款時，使用者必須感到安心，並相信自己仍在正確的頁面。

  • 數據分析和真實使用者監控：讓您可以針對實際使用者測試表單設計的效能和可用性，並進行監控。