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

Sam Dutton

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

步驟 1：使用有意義的 HTML

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

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

請查看 index.html 中表單的 HTML。你會看到名稱、電子郵件地址等輸入內容 和密碼。每個類別都屬於同一個區塊，且每個都有一個標籤。「註冊」按鈕是<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>

按一下「查看應用程式」即可預覽申請表。這會顯示表單外觀，除了 預設瀏覽器樣式。

  • 預設樣式看起來可以嗎？你認為表單有哪些地方需要改善？
  • 預設樣式是否有效？表單原樣使用時可能會遇到哪些問題？內容 行動網頁呢？使用螢幕閱讀器或其他輔助技術呢？
  • 您的使用者是誰？您指定哪些裝置和瀏覽器？

測試表單

您可能會取得大量硬體、 裝置研究室 透過各種瀏覽器、平台和裝置，以更簡便的方式輕鬆試用表單：

按一下「查看應用程式」即可預覽申請表。

  • 使用 Chrome 開發人員工具裝置模式在不同裝置上試用表單。
  • 現在請使用手機或其他實體裝置開啟表單。您發現什麼差異？

步驟 2：新增 CSS 提升表單品質

按一下「檢視原始碼」以返回原始碼。

到目前為止，HTML 沒有錯誤，但您必須確定表單在 接觸大量使用行動裝置和電腦的使用者

在這個步驟中，您將新增 CSS 來簡化表單使用。

請複製以下所有 CSS 並貼到 css/main.css 檔案中：

按一下「查看應用程式」，查看樣式化的報名表單。然後按一下「檢視原始碼」返回 css/main.css。

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

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

  • CSS 供應商為行動裝置優先。媒體查詢 用於對寬度至少為 400px 的可視區域套用 CSS 規則， 寬度至少為 500px 的可視區域這些中斷點 適合嗎？您該如何選擇表單中斷點？

步驟 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 擴充功能，請使用 ChromeVox 擴充功能。

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

在「Full name」(全名) 輸入中使用 autocomplete 值 name 是合理的，但如果是 或是其他輸入值？ * 如果是「電子郵件」輸入欄位為 autocomplete="username"，表示瀏覽器的密碼管理工具會儲存 電子郵件地址當做「name」，讓這個使用者 (使用者名稱！) 使用密碼。 * 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 填寫表單嗎？如果不是，您會做出什麼改變？

此時您的表單應如下所示：

再升級

本程式碼研究室不會涵蓋以下幾個重要功能：

  • 檢查是否有遭外洩的密碼。切勿允許密碼遭到外洩。 您可以 (也應該) 使用密碼檢查服務找出遭外洩的密碼。 您可以使用現有服務，也可以自行在伺服器上執行服務。快試試看吧！新增密碼 正在檢查表單。

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

  • 樣式與品牌：請確保這些項目與網站的其他部分相符。輸入姓名和地址時 並付款，使用者得安心，因為他們仍待在適當的地方。

  • 數據分析與真實使用者監控： 方便真人使用者測試及監控表單設計的效能和可用性。