表單

表單是後台最常被做壞的地方:label 亂擺、邊打字邊噴紅、error 只寫「Invalid」。這章把 label 位置、validation 觸發時機、error 文案、autosave 適用情境都定稿,讓你照抄就對。當你要排新表單、或在猶豫「這欄該不該即時驗證」「這頁能不能 autosave」時,翻這頁對一下。

欄位與驗證

這是什麼

標籤在輸入框上方;離開欄位時才驗證;錯誤要寫清楚怎麼改。說明文字不要塞在預設提示裡。

什麼時候用

任何表單都應這樣排版與驗證;必填用星號標示,選填要寫「選填」。

預覽依本指南規則實作

對外顯示的名稱

請輸入有效網域,例如 app.example.com

方案

Autosave

這是什麼

改完就自動儲存:開關一撥就存;文字欄位在離開或停筆約三秒後存,並顯示「儲存中」「已儲存」。

什麼時候用

設定頁、個人資料等常改小欄位時用,減少每次都按「儲存」;大型表單仍建議明確送出按鈕。

預覽依本指南規則實作
已儲存 · 11:42

表單長度與形式

這是什麼

依欄位多寡選擇呈現方式:欄位少用小視窗、中等用右側滑出、很多或分步驟用整頁。

什麼時候用

少於約八個欄位用彈出視窗;八到十五個用側欄;更多欄位或要分步填寫就用整頁或步驟精靈。

預覽依本指南規則實作

Modal

< 8 欄

Drawer

8–15 欄

Full page

> 15 欄

多步驟 Wizard

這是什麼

頂部顯示步驟進度,可「上一步」「下一步」逐步填寫。

什麼時候用

流程必須分階段完成時用;若尚未儲存就要離開,要跳出警告避免資料遺失。

預覽依本指南規則實作
  1. 1. 基本資料
  2. 2. 成員
  3. 3. 確認

Rich text editor

這是什麼

可設定標題層級、刪除線、復原與重做、引用、縮排,並插入圖片與表格;Tab 增加縮排,Shift+Tab 減少縮排。

什麼時候用

需要說明文字、公告、備註等富文本內容時用;工具列要可點選,並支援鍵盤快捷鍵給熟手。

預覽依本指南規則實作

專案說明(H1)

背景(H2)

這段是正文。粗體斜體底線刪除線 應可並存且可讀。

重點(H3)

引用區塊:客戶希望下週完成 onboarding。

待辦(H4)

  • 第一項(可 Tab 縮排變子層級)
  • 第二項
圖說可選
欄位
狀態進行中
負責人Ana
已儲存 · 11:42工具列可點 · Tab/⇥ 縮排 · ⌘Z 復原412 / 2,000

規格速查

項目定稿值
Label 位置top-aligned(欄位上方)填寫最快,預設選這個
Required紅色 * 標必填;多數欄位都必填時反過來標 (optional)
Inline 驗證onBlur 觸發,不要 onChange 邊打字邊紅
Error 位置欄位下方,寫「為什麼錯 + 怎麼修」,不要只寫 Invalid
Help textlabel 與 input 之間,永遠可見;不要用 placeholder 當 help text
Disabled對比降低、cursor: not-allowed、加 tooltip 解釋為何 disabled
Autosave 用於文件編輯、settings toggle、看板狀態切換
Autosave 不用高風險變更(密碼、付款、權限)與多欄位送出,仍用 Save 按鈕

常見做錯

做錯正確
用 placeholder 當 labellabel 永遠可見,placeholder 只放範例值
onChange 邊打字邊紅inline validation 在 blur 才觸發
error 只寫「Invalid」寫清楚為什麼錯 + 怎麼修,附正確格式範例
用 placeholder 當 help texthelp text 放 label 與 input 之間,永遠可見
高風險欄位(密碼、付款)用 autosave高風險一律保留 Save 按鈕,明確送出才生效

相關章節

  • Modal 與覆層 — 表單該塞 modal、drawer 還是 full page
  • 按鈕 — submit 按鈕的 loading、disabled 與順序
  • 回饋 — 送出後的 toast 與 autosave 狀態提示
  • 新增/編輯頁 — 長表單的整頁編排範本