表單是後台最常被做壞的地方:label 亂擺、邊打字邊噴紅、error 只寫「Invalid」。這章把 label 位置、validation 觸發時機、error 文案、autosave 適用情境都定稿,讓你照抄就對。當你要排新表單、或在猶豫「這欄該不該即時驗證」「這頁能不能 autosave」時,翻這頁對一下。
這是什麼
標籤在輸入框上方;離開欄位時才驗證;錯誤要寫清楚怎麼改。說明文字不要塞在預設提示裡。
什麼時候用
任何表單都應這樣排版與驗證;必填用星號標示,選填要寫「選填」。
這是什麼
改完就自動儲存:開關一撥就存;文字欄位在離開或停筆約三秒後存,並顯示「儲存中」「已儲存」。
什麼時候用
設定頁、個人資料等常改小欄位時用,減少每次都按「儲存」;大型表單仍建議明確送出按鈕。
這是什麼
依欄位多寡選擇呈現方式:欄位少用小視窗、中等用右側滑出、很多或分步驟用整頁。
什麼時候用
少於約八個欄位用彈出視窗;八到十五個用側欄;更多欄位或要分步填寫就用整頁或步驟精靈。
這是什麼
頂部顯示步驟進度,可「上一步」「下一步」逐步填寫。
什麼時候用
流程必須分階段完成時用;若尚未儲存就要離開,要跳出警告避免資料遺失。
這是什麼
可設定標題層級、刪除線、復原與重做、引用、縮排,並插入圖片與表格;Tab 增加縮排,Shift+Tab 減少縮排。
什麼時候用
需要說明文字、公告、備註等富文本內容時用;工具列要可點選,並支援鍵盤快捷鍵給熟手。