60 秒決策
先確認使用者要完成的事。
適合使用
- 任何表單控制需要讓人知道要填什麼或要操作什麼。
- 控制項有可見名稱，且名稱可以和欄位用 for 與 id 正確連結。
不適合使用
- 只有 Placeholder 而沒有永久可見的欄位名稱。
- 用模糊的「輸入內容」當作所有欄位的名稱。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
名稱說用途，不說動作
「公司 Email」比「請輸入 Email」更像欄位名稱；規則留給輔助文字。
Label 要連到控制項
使用 label for 與相同的 input id，點擊文字也能聚焦欄位。
Placeholder 只適合舉例
範例會在輸入後消失，不能承擔欄位名稱的責任。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
預設
在欄位附近看得到用途名稱。
聚焦
Label 保持可見，欄位 Focus 也容易辨識。
有錯誤
Label 不消失，仍與錯誤訊息一起說明要修正哪個欄位。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
成員姓名 Label
先觀察：欄位名稱是否一直可見，且點擊文字會把游標帶進輸入框。
操作：點擊「成員姓名」文字，再按 Tab 檢查焦點。
預期結果：使用者知道欄位用途，Label 與 input 有正確連結。
可操作 Demo
Label 與輸入欄的連結
Label 會一直保留在欄位上方；點擊它可把焦點移到輸入框。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「成員姓名」的 Label。使用可見的 label 元素，for 要正確對應 input 的 id；Label 說明欄位用途，不用 Placeholder 取代。文字簡短清楚，點擊 Label 也能聚焦到欄位。驗收清單
不要只確認欄位能不能點。
- 每個控制項是否有可見、具體的名稱？
- label 的 for 是否對應控制項 id？
- Placeholder 是否只用來舉例？
- 錯誤出現時是否仍能辨識欄位名稱？