替貓老闆做官網 · 第 07 章
按鈕狀態與表單回饋
每顆按鈕都要回答「按了會怎樣」。hover、focus、active 三種狀態補齊，候補表單加上驗證與送出回饋——缺任何一個，網站就開始假。
貓老闆的簡報
陶碗補貨那頁的 Email 表單要能用。客人填了收不到確認，被罵的人是我，不是你。
——貓掌櫃的老闆「掌櫃」下需求時的原話
這章做什麼
產出可用的候補表單：Email 必填驗證、送出中狀態、成功後的確認文案；順手把全站按鈕的三種狀態補齊。
動手做
- 全站按鈕補三態：hover 變深、focus-visible 有鍵盤外框、active 微縮，過渡 0.15 秒。
- 表單欄位：Email 必填＋格式檢查。錯誤訊息寫「Email 看起來不對，再檢查一次」，不要只寫「錯誤」。
- 送出中：按鈕禁用並顯示「送出中…」；成功後整個表單換成確認文字與補貨說明。
- 用鍵盤從頭操作一次：Tab 到每顆按鈕、送出空表單、修正錯誤、看到成功。滑鼠能過不算過。
親手試試
亂填、漏填、留空再送出——看驗證怎麼攔，成功長什麼樣。
這樣對 AI 說
中文就可以
為「貓掌櫃」的陶燒貓碗做補貨候補表單。欄位：Email（type=email、必填、格式驗證）。規則：錯誤訊息要具體友善（不要只寫「錯誤」）；送出時按鈕顯示「送出中…」並禁用；成功後表單區塊換成這句話：「好了！補貨當天會寄信給你，掌櫃會盯著窯的進度。」另外，全站所有按鈕補齊 hover／focus-visible／active 三種狀態，過渡 0.15 秒，並尊重 prefers-reduced-motion。
驗收清單
按鈕和表單是網站誠不誠實的地方。每一顆都要回答「按了會怎樣」。
- 每顆按鈕都有 hover、focus-visible、active 三態，鍵盤走得到。
- 候補表單送出空值會被擋下，錯誤訊息指出哪個欄位不對。
- 送出中按鈕禁用並顯示「送出中…」。
- 成功後表單換成確認文字，不是只跳一個提示。
- 同一動作全站只有一個名字（例如一律用「變更」，不用「修改」「更新」）。
- 只放圖示的按鈕都有文字標籤或 aria-label。
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。
進度只存在這台瀏覽器，不上傳、不追蹤。