表單到收款：做出能接單的網站 · 第 02 章
表單要讓人填得完
只收出貨需要的資料，標籤一直顯示，填錯時指出原因；確認頁讓客人核對商品、費用和收件資料。
貓老闆的簡報
買一個碗不用交代身家。姓名、聯絡信箱、收件地址和數量，先把這幾格做好。
——貓掌櫃官網的老闆「掌櫃」下需求時的原話
這章做什麼
做出可在手機與鍵盤操作的訂單表單及確認頁。此章只完成前端，畫面要清楚標示尚未真正送出。
動手做
- 加入收件人、電子郵件、收件地址、數量四個欄位；數量用 1 到 3 的選單，備註可留空。每格都要有標籤。
- 檢查必填與電子郵件格式，錯誤寫在欄位旁邊，保留已填內容；用鍵盤 Tab 依序操作。
- 確認頁顯示商品、數量、商品小計、運費與總額，並提供返回修改。範例資料一律使用虛構姓名與地址。
- 送出後先停用按鈕並顯示處理中；此時先用明確標示的模擬結果，下一章才串後端。
親手試試
這裡只示範兩個欄位的驗證，不傳送也不儲存你輸入的資料。
這樣對 AI 說
中文就可以
請替貓掌櫃新增訂單表單：收件人、電子郵件、收件地址必填，數量 1 到 3，備註選填。每個輸入格有持續顯示的標籤，錯誤訊息要指出哪裡需要修改。確認頁列商品小計、運費 60 元、總額與返回修改，前端試算僅供預覽。請支援手機與鍵盤操作，保留已填資料。這章只做前端，用清楚標示的模擬結果，不宣稱訂單已建立；送出時顯示處理中並避免連按。完成後列出我該實際操作的檢查步驟。
本章驗收清單
試著漏填、填錯，再用正確的虛構資料操作一次。
- 開始打字後欄位名稱仍看得到
- 錯誤訊息具體且不清空其他欄位
- 確認頁可返回修改
- 手機不需橫向捲動，鍵盤可以完成操作
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。
進度只存在這台瀏覽器，不上傳、不追蹤。