本程式碼研究室將說明如何建構安全、容易存取且易於使用的註冊表單。
步驟 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 開發人員工具裝置模式 模擬行動裝置
- 將電腦中的網址傳送到手機。
- 使用 BrowserStack 等服務測試範圍 裝置和瀏覽器
- 使用螢幕閱讀器工具 (例如 ChromeVox Chrome 擴充功能) 試用表單。
按一下「查看應用程式」即可預覽申請表。
- 使用 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 填寫表單嗎?如果不是,您會做出什麼改變?
此時您的表單應如下所示:
再升級
本程式碼研究室不會涵蓋以下幾個重要功能:
檢查是否有遭外洩的密碼。切勿允許密碼遭到外洩。 您可以 (也應該) 使用密碼檢查服務找出遭外洩的密碼。 您可以使用現有服務,也可以自行在伺服器上執行服務。快試試看吧!新增密碼 正在檢查表單。
服務條款和隱私權政策文件的連結:向使用者清楚說明 如何保護他們的資料
樣式與品牌:請確保這些項目與網站的其他部分相符。輸入姓名和地址時 並付款,使用者得安心,因為他們仍待在適當的地方。
數據分析與真實使用者監控: 方便真人使用者測試及監控表單設計的效能和可用性。