在第一部分中,您已瞭解如何建立基本表單。 本節將說明最佳做法。 在本單元中,您將瞭解使用者體驗 (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》說明瞭 必填欄位。如果表單中大部分欄位都是必填資訊,最好 表示選填欄位。
如何將錯誤訊息連結至表單控制項,以便讓螢幕閱讀器使用這些控制項? 詳情請參閱下一個單元。
隨堂測驗
測試表單設計知識
Google 如何描述表單控制項?
description
屬性。placeholder
屬性。<description>
元素。<label>
元素。建議的點按目標大小為何?
應該在哪裡顯示錯誤訊息?
<form>
的頂端。