表單結構與驗證
紅框只是一個訊號，表單還需要告訴人怎麼完成。
先讓人知道每一欄要填什麼，再交代規則；出錯時在欄位旁說明，送出失敗後再用摘要帶人回到待修位置。
閱讀順序
表單不是把元件排好就結束，資訊要在正確時機出現。
- 先認識欄位每個控制項先有 Label；必填規則也在輸入前看得到。
- 再補充規則Helper Text 說格式、上限與用途，不讓使用者邊填邊猜。
- 群組保留關係相關選項用 Fieldset 與 Legend 說清楚共同問題。
- 錯誤分兩層回饋Inline Validation 與 Error Message 管欄位；送出失敗再用 Summary 管整份表單。
責任比較
每一種文字都在回答不同問題。
點選元件名稱可查看完整介紹、可操作 Demo、AI Prompt 與驗收清單。
| 元件 | 什麼時候出現？ | 負責的範圍 | 常見誤用 |
|---|---|---|---|
| Label｜欄位標籤 | 欄位一出現就要有 | 單一控制項的用途 | Placeholder 會消失，不能代替它。 |
| Helper Text｜輔助文字 | 輸入前 | 格式、限制或用途 | 說明規則，但不取代欄位名稱。 |
| Required Indicator｜必填標記 | 輸入前 | 單一欄位或整組必填規則 | 不能只靠紅色或一顆未解釋的星號。 |
| Error Message｜錯誤訊息 | 規則被違反時 | 單一欄位或單一群組的修正方式 | 紅框沒有告訴人要怎麼改。 |
| Fieldset｜欄位群組 | 一組選項出現時 | 共同回答一題的控制項 | 只是排在一起的 div 沒有群組語意。 |
| Legend｜群組標題 | 與 Fieldset 一起出現 | 群組共同問題與規則 | 不該移到群組外當純視覺標題。 |
| Validation Summary｜驗證摘要 | 送出失敗後 | 整份表單還有哪些問題 | 摘要不能取代每個欄位旁的錯誤。 |
| Inline Validation｜即時驗證 | 輸入後或離開欄位後 | 目前欄位可立即判斷的規則 | 初次進入空欄位就報錯，會打斷輸入。 |
先做這個流程
新增成員表單：欄位旁修正，送出後再給全局地圖。
一個 Email 格式錯誤，先在欄位旁說明格式與範例；若姓名和 Email 都沒填，再把兩件事列到 Validation Summary，讓使用者不用在長表單中來回找。
欄位附近的錯誤是修正說明；摘要是定位地圖。兩者一起出現時，才不會讓人按了送出卻不知道下一步。
操作驗證摘要 Demo