設計基本概念

在第一節中，您學到如何建立基本表單。本節將說明最佳做法。 在本單元中，您將瞭解使用者體驗 (UX)，以及妥善實作使用者介面 (UI) 的重要性。

建立簡單好用的介面

填寫表單可能既耗時又令人沮喪，但其實不必如此。如要打造優質的使用者體驗，請確保介面直覺易用。 確保提供最佳表單結構和圖像設計 (版面配置、間距、字型大小和顏色)，以及邏輯 UI (例如標籤文字和適當的輸入類型)。看看如何改善表單，讓使用者更容易填寫。

標籤

你還記得 <label> 元素的用途嗎？ 標籤會說明表單控制項。 清楚易懂的標籤可協助使用者瞭解表單控制項的用途。

為每個表單控制項加上標籤

要將新的表單控制項新增至表單嗎？ 請先新增新欄位的標籤。 這樣就不會忘記新增。

先新增標籤也有助於專注於表單目標，也就是「我需要哪些資料？」 確認使用者瞭解這些資訊後，你就可以專心協助他們輸入資料並填寫表單。

標籤用語

假設您想描述電子郵件地址欄位，您可以按照下列方式操作：

<label for="email">Enter your email address</label>

或者，您也可以這樣描述：

<label for="email">Email address</label>

你會選擇哪一個描述？

以我們的範例來說，建議使用「電子郵件地址」這個簡短標籤，因為簡短標籤較容易掃描、可減少視覺雜亂，並協助使用者更快瞭解需要哪些資料。

標籤位置

使用 CSS，您可以將標籤放置在表單控制項的頂端、底部、左側和右側。你要放在哪裡？

研究顯示，最佳做法是將標籤放在表單控制項上方，方便使用者快速掃描表單，瞭解哪個標籤屬於哪個表單控制項。

設計表單

設計良好的表單可大幅降低表單放棄率。使用適當的元素和輸入類型，協助使用者輸入資料 您可以選擇各種表單元素和輸入類型。 為提供最佳使用者體驗，請針對您的用途使用最合適的元素和輸入類型。 如果使用者應填寫多行文字，請使用 <textarea> 元素。 如果使用者必須接受網站的條款及細則，請使用 <input type="checkbox">。

您也應該能從視覺上區分不同類型的表單控制項。 按鈕應看起來像按鈕。輸入內容，例如輸入內容。讓使用者更容易辨識表單控制項的用途。舉例來說，如果某個項目看起來像連結，點選後應開啟新頁面，而不是提交表單。

協助使用者瀏覽表單

花俏的版面配置雖然有趣，但可能會妨礙使用者填寫表單。

特別是研究結果顯示，最好只使用單一欄位。使用者不想花時間尋找下一個表單控制項的位置。使用單欄時，只有一個方向可遵循。

協助使用者與表單互動

為避免使用者誤觸及誤按，並協助他們與表單互動，請將按鈕設得夠大。建議按鈕的輕觸目標大小至少為 48 像素。您也應使用 marginCSS 屬性在表單控制項之間加入足夠的間距，以免使用者誤觸。

表單控制項的預設大小太小，無法實際使用。您應使用 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>

如果欄位為必填，請清楚標示！The Anatomy of Accessible Forms 說明瞭標示必填欄位的替代方式。如果表單中的大多數欄位都是必填，建議標示選填欄位。

如何將錯誤訊息連結至表單控制項，讓螢幕閱讀器可存取這些訊息？詳情請參閱無障礙功能單元。

隨堂測驗

測試您設計表單的知識

資源

• 建立出色的表單
• 行動裝置表單設計最佳做法
• Baymard Institute：電子商務使用者體驗研究
• 別讓我思考