設計基本概念

在第一部分中，您已瞭解如何建立基本表單。 本節將說明最佳做法。 在本單元中，您將瞭解使用者體驗 (UX) 模型 以及導入完善的使用者介面 (UI) 可帶來巨大成效。

建立容易使用的介面

填寫表單可能相當耗時 不一定。 為提供優質的使用者體驗，請務必讓 UI 符合直覺。 請務必採用最佳板型結構和圖形設計 (版面配置、間距、字型大小和顏色)。 以及邏輯 UI (例如標籤用語和適當的輸入類型)。 以下說明如何改善表單，並讓表單更容易使用。

標籤

您記得 <label> 元素的用途嗎？ 標籤用來描述表單控制項。 清楚且條理分明的標籤能幫助使用者瞭解表單控制項的用途。

為每個表單控制項使用標籤

要在表單中新增表單控制項嗎？ 先為新欄位新增標籤。 這樣一來，別忘了把它加入試算表。

先新增標籤也能幫助您專注於表單的目標：我需要準備哪些資料？ 確認明確後，您就可以著重於協助使用者輸入資料及填寫表單。

標籤用語

假設您想描述電子郵件地址欄位。方法如下：

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

您也可以按照以下方式描述：

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

你會選擇哪一則說明？

舉例來說，「電子郵件地址」 因為簡短標籤比較方便瀏覽 減少視覺幹擾 協助使用者更快瞭解需要的資料。

標籤位置

透過 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 媒體功能。

顯示錯誤發生的位置

為方便使用者找出需要留意的表單控制項 在他們所參照的表單控制項旁顯示錯誤訊息。 系統在提交表單時發生錯誤時，請務必前往第一個無效的表單控制項。

向使用者清楚說明應輸入哪些資料

請務必讓使用者瞭解如何輸入有效的資料。 他們是否需要輸入至少 8 個字元的密碼？告訴他們。

<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 Access Form》說明瞭 必填欄位。如果表單中大部分欄位都是必填資訊，最好 表示選填欄位。

如何將錯誤訊息連結至表單控制項，以便讓螢幕閱讀器使用這些控制項？ 詳情請參閱下一個單元。

隨堂測驗

測試表單設計知識

資源

• 建立令人驚豔的表單
• 製作行動版表單的最佳做法
• Baymard Institute：電子商務使用者體驗研究
• 別讓我思考