在第一部分中，您已瞭解如何建立基本表單。本節會介紹最佳做法。在這個單元中，您可以瞭解使用者體驗 (UX)，以及實作完善的使用者介面 (UI) 為何能帶來巨大的影響。
建立容易使用的介面
填寫表單相當耗時又麻煩，但不一定要如此。 為了提供良好的使用者體驗，請確保使用者介面符合直覺。確保您採用最佳的表單結構和平面設計 (版面配置、間距、字型大小和顏色) 和邏輯 UI (例如標籤用字和適當的輸入類型)。一起來看看如何改善表單，讓表單變得簡單易用。
標籤
您記得 <label> 元素的用途嗎？
標籤描述表單控制項。清楚且妥善的標籤可協助使用者瞭解表單控制項的用途。
針對所有表單控制項使用標籤
要在表單中新增表單控制項嗎？ 首先，請為新欄位新增標籤。如此一來，就不必忘記新增這個代碼。
先新增標籤也有助於專注於達成表單目標，也就是我需要哪些資料？ 這些資訊清楚易懂後，您就可以專注於協助使用者輸入資料並填寫表單。
標籤用字
假設您想說明電子郵件欄位的內容，例如，您可以按照下列步驟執行：
<label for="email">Enter your email address</label>
你也可以像這樣描述：
<label for="email">Email address</label>
您會選擇哪種說明？
例如，我們建議使用「Email address」(電子郵件地址) 這個詞，因為簡短標籤更容易掃描、減少視覺幹擾，並協助使用者更快瞭解需要哪些資料。
標籤位置
透過 CSS，您可以將標籤置於表單控制項的頂端、底部、左側和右側。要放在哪裡？
研究顯示最佳做法是將標籤置於表單控制項的上方，方便使用者快速掃描表單，並查看哪個標籤屬於哪個表單控制項。
設計表單
良好的表單設計可以大幅降低表單放棄率。使用適當的元素和輸入類型，協助使用者輸入資料。這裡有各種表單元素和輸入類型可供選擇。如要提供最佳使用者體驗，請依據您的用途選擇最合適的元素和輸入類型。如果使用者應填入多行文字，請使用 <textarea> 元素。然後在需要接受您網站條款及細則的位置使用 <input type="checkbox">。
此外，您也應以視覺方式區分不同類型的表單控制項。按鈕的外觀應該要像按鈕。輸入，例如輸入內容。讓使用者易於瞭解表單控制項的用途。 舉例來說，如果看起來像是連結，點選後應該會開啟新頁面，而不是提交表單。
協助使用者瀏覽表單
巧妙的版面配置雖然有趣，卻很有趣，但有助於使用者填寫表單。
尤其是研究顯示，建議您僅使用單一資料欄。使用者不會花時間搜尋下一個表單控制項的位置。只要使用單一資料欄，也只有一個方向適用。
協助使用者與表單互動
為了避免意外輕觸和點擊，同時協助使用者與表單互動，請調整按鈕大小。建議按鈕的輕觸目標大小至少為 48 像素。您也應該使用 margin CSS 屬性，在表單控制項之間加入足夠的間距，以免發生意外互動。
表單控制項的預設大小太小，因此難以使用。建議您使用 padding 及變更預設的 font-size 來增加大小。
您可以使用 pointer CSS 媒體功能，為不同的指標裝置 (例如滑鼠) 定義不同的尺寸。
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}
進一步瞭解 pointer CSS 媒體功能。
顯示發生錯誤的位置
為了讓使用者一看就知道哪些表單控制項需要處理，請在他們參照的表單控制項旁邊顯示錯誤訊息。表單提交時顯示錯誤訊息時，請務必前往第一個無效的表單控制項。
讓使用者清楚知道該輸入哪些資料
確保使用者瞭解如何輸入有效的資料。 他們需要至少輸入八個字元的密碼嗎？請告訴他們。
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>
向使用者清楚說明必填欄位
<label for="name">Name (required)</label>
<input name="name" id="name" required>
如果欄位是必要欄位，請顯而易見！可存取表單剖析一文說明表示必填欄位的替代方案。如果表單中的大部分欄位為必填，建議您指明選填欄位。
如何將錯誤訊息連結至表單控制項，讓螢幕閱讀器能使用這些控制項？ 請參閱下一個單元。
隨堂測驗
測驗您對於表單設計的相關知識
如何介紹表單控制項？
<description> 元素。<label> 元素。description 屬性。placeholder 屬性。建議的輕觸目標大小為何？
應該將錯誤訊息放在哪裡？
<form> 的頂端。