本程式碼研究室將說明如何建構安全、無障礙且易於使用的註冊表單。
步驟 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。
- 預設樣式是否「看起來」正確?您會如何調整表單,讓外觀更美觀?
- 預設樣式是否運作正常?使用現有表單時可能會遇到哪些問題?那行動版呢?螢幕閱讀器或其他輔助技術又如何?
- 您的使用者是誰?您鎖定的裝置和瀏覽器為何?
測試表單
您可以購買大量硬體並設定裝置實驗室,但其實還有更便宜、更簡單的方法,可在各種瀏覽器、平台和裝置上試用表單:
- 使用 Chrome 開發人員工具的裝置模式模擬行動裝置。
- 將網址從電腦傳送到手機。
- 使用 BrowserStack 等服務,在各種裝置和瀏覽器上進行測試。
- 請使用螢幕閱讀器工具 (例如 ChromeVox Chrome 擴充功能) 試用表單。
按一下「查看應用程式」即可預覽註冊表單。
- 使用 Chrome 開發人員工具的裝置模式,在不同裝置上試用表單。
- 接著,請在手機或其他實際裝置上開啟表單。你發現哪些差異?
步驟 2:加入 CSS 讓表單運作更順暢
按一下「View Source」即可返回原始碼。
目前 HTML 沒有任何問題,但您需要確保表單可在行動裝置和電腦上正常運作,並適合各種使用者。
在這個步驟中,您將新增 CSS,讓表單更容易使用。
複製並貼上以下所有 CSS 至 css/main.css
檔案:
按一下「View App」,即可查看樣式設定的註冊表單。接著,按一下「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
屬性。請嘗試使用密碼提交,密碼長度須少於八個字元。瀏覽器會發出警告,指出密碼不夠長,並因 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
檔案中。
(CSS 已在步驟 2 中加入)。請查看密碼切換按鈕的樣式和位置。)
如要體驗螢幕閱讀器如何與表單互動,請安裝 ChromeVox 擴充功能,然後瀏覽表單。請問你能否只使用 ChromeVox 填寫表單?如果不是,你會改變哪些部分?
此時表單應如下所示:
進一步
本程式碼研究室未涵蓋幾項重要功能:
檢查是否有遭外洩的密碼。請勿允許使用遭到入侵的密碼。您可以 (且應該) 使用密碼檢查服務,找出遭到盜用的密碼。您可以使用現有的服務,也可以在自己的伺服器上自行執行服務。快試試看吧!在表單中加入密碼檢查功能。
連結至服務條款和隱私權政策文件:向使用者清楚說明您如何保護使用者的資料。
樣式和品牌:確保這些元素與網站的其他部分相符。輸入姓名和地址及付款時,使用者必須感到安心,相信自己仍在正確的頁面。
分析和真實使用者監控:讓您可以針對實際使用者測試和監控表單設計的效能和可用性。