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

Sam Dutton

瞭解如何建構安全、無障礙且易於使用的註冊表單。 最終表單位於 CodePen。

1. 使用有意義的 HTML

瞭解如何使用表單元素，充分運用內建瀏覽器功能。

  1. 建立新的「畫筆」。

  2. 複製下列程式碼，並貼到 HTML 編輯器。

    <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>

  3. 按一下即時預覽畫面，即可查看 HTML 表單。有名稱、電子郵件地址和密碼的輸入欄位。這份表單只會使用預設瀏覽器 CSS。

每個輸入內容都位於一個區段中，且都有標籤。重要的是，註冊按鈕是 <button>。在本程式碼研究室稍後的部分，您將瞭解所有這些元素的特殊功能。

請思考以下問題：

  • 預設樣式看起來是否正常？你會做出什麼調整，讓表單看起來更美觀？
  • 預設樣式是否運作正常？使用目前表單時可能會遇到哪些問題？行動裝置呢？螢幕閱讀器或其他輔助技術呢？
  • 您的使用者是誰？您要指定哪些裝置和瀏覽器？

測試表單

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

開啟 CodePen 的即時檢視畫面，或前往我們的即時檢視畫面。 使用 Chrome 開發人員工具的裝置模式，在不同裝置上測試表單。

現在請在手機或其他實體裝置上開啟表單。你發現有哪些差異？

2. 新增 CSS，讓表單運作更順暢

目前為止，HTML 沒有任何問題，但您需要確保表單在行動裝置和電腦上都能正常運作，讓各種使用者都能順利填寫。

在這個步驟中，您將新增 CSS，讓表單更容易使用。 複製並貼上這個 CSS 到 css/main.css 檔案中。

按一下預覽畫面，即可查看套用樣式的註冊表單。

這個 CSS 是否適用於各種瀏覽器和螢幕大小？

  • 請嘗試調整 padding、margin 和 font-size，以配合測試裝置。
  • CSS 採用行動優先設計。使用媒體查詢 套用寬度至少為 400px 的可視區域適用的 CSS 規則， 然後再次套用寬度至少為 500px 的可視區域適用的 CSS 規則。這些中斷點是否足夠？您應該如何為表單選擇中斷點？

3. 新增屬性，協助使用者輸入資料

在輸入元素中新增屬性，讓瀏覽器儲存及自動填入表單欄位值，並針對缺少或無效資料的欄位發出警告。

更新 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 相符。其他標籤和輸入內容的運作方式相同。當標籤 (或標籤的相關聯輸入) 取得焦點時，螢幕閱讀器也會朗讀標籤文字。

請嘗試提交表單，但不要填寫任何欄位。瀏覽器不會提交表單，而是會提示填寫缺少的資料並設定焦點。這是因為我們已將 require 屬性新增至所有輸入內容。

現在請嘗試提交少於八個字元的密碼。由於 minlength="8" 屬性，瀏覽器會警告密碼長度不足，並將焦點設在密碼輸入欄位。pattern (用於名稱輸入) 和其他驗證限制也適用相同做法。 瀏覽器會自動完成所有這些作業，不需要任何額外程式碼。

使用 autocomplete 值 name 做為「全名」輸入內容很合理，但其他輸入內容呢？

  • autocomplete="username" 瀏覽器的密碼管理工具會將電子郵件地址儲存為這個使用者的「名稱」(即使用者名稱！)，並搭配密碼。
  • autocomplete="new-password" for 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 displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

這個版本新增了多項功能，可協助使用者輸入密碼：

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

如要啟用密碼切換按鈕，並向使用者顯示密碼限制相關資訊，請複製 JavaScript，然後貼到 JavaScript 編輯器中。

  • 使用圖示切換密碼顯示狀態，是否比文字更合適？邀請一小群朋友或同事進行折扣可用性測試。

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

深入瞭解

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

  • 檢查是否有密碼外洩。請勿允許使用遭外洩的密碼。建議您使用密碼檢查服務，找出遭外洩的密碼。

  • 服務條款和隱私權政策文件的連結。清楚向使用者說明您如何保護他們的資料。

  • 更新表單的樣式和品牌，確保與網站的其餘部分一致。這樣一來，使用者在輸入姓名和地址時，以及付款時，就能安心確認自己是否在正確的網站上。

  • 新增資料分析和 Real User Monitoring。 讓真實使用者測試及監控表單設計的效能和可用性。