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

山姆.杜頓

在本程式碼研究室中，我們會說明如何建構安全、容易存取且簡單易用的註冊表單。

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

按一下「查看應用程式」即可預覽報名表單。這會顯示表單在預設瀏覽器樣式以外，沒有其他 CSS 的樣貌。

  • 預設樣式看起來是否正常？您想進行哪些變更，讓表單看起來更美觀？
  • 預設樣式是否正常運作？以原始表單使用時可能會遇到哪些問題？行動裝置呢？這對螢幕閱讀器或其他輔助技術有什麼影響？
  • 您的使用者是誰？您指定了哪些裝置和瀏覽器？

測試表單

您可能會取得大量的硬體並設定裝置研究室，但您可以在各種瀏覽器、平台和裝置上，以更低廉的費用和更簡單的方式試用表單：

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

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

步驟 2：新增 CSS 以改善表單功能

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

HTML 目前是無任何錯誤，但您必須確保表單適用於各種行動裝置和電腦的使用者。

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

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

按一下「查看應用程式」，即可查看樣式化的報名表單。接著，按一下「View Source」，即可返回 css/main.css。

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

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

  • CSS 為行動裝置優先。媒體查詢的作用是將 CSS 規則套用至寬度至少 400px 的可視區域，之後檢視範圍至少為 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 擴充功能。

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

針對「Full name」(全名) 輸入使用 autocomplete 值 name 是合理的，但其他輸入怎麼樣呢？*「電子郵件」輸入欄位 autocomplete="username" 表示瀏覽器的密碼管理工具會將電子郵件地址儲存為該使用者的「名稱」(使用者名稱！)，做為密碼。 *「密碼」的 autocomplete="new-password" 是提示密碼管理工具，其應將這個值儲存為目前網站的密碼。接著，您可以使用 autocomplete="current-password" 啟用登入表單中的自動填入功能 (提醒您，此為sign-up表單)。

步驟 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 檔案中。

(CSS 已在步驟 2 中導入)。查看密碼切換按鈕的樣式和位置)。

  • 圖示在切換密碼顯示時的效果比文字來得好嗎？歡迎與少數好友或同事一起體驗折扣可用性測試。

  • 如要體驗螢幕閱讀器如何與表單搭配使用，請安裝 ChromeVox 擴充功能並瀏覽表單。 你只能透過 ChromeVox 完成表單嗎？如果沒有，你要做出哪些調整？

這時，您的表單看起來應像這樣：

進一步探索

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

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

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

  • 樣式和品牌：請確保這些元素與網站的其他元素相符。輸入姓名和地址及付款時，使用者必須感到安心，相信自己還留在正確的地方。

  • Analytics (分析) 和真實使用者監控： 讓開發人員測試及監控表單設計的成效和可用性。