LESSON-18 · TOPIC 01
能從 form 建立 FormData，並解釋只有具 name、未 disabled 且符合成功控制項規則的欄位會進入 payload。
能從 form 建立 FormData，並解釋只有具 name、未 disabled 且符合成功控制項規則的欄位會進入 payload。
後端只會收到實際被序列化的欄位；畫面看得到 input 不代表 request 一定含該值。
要修改的檔案：files/starter/contact.html
定位：先用 [...new FormData(form).entries()] 直接看實際 key/value，不先猜後端問題。｜依 starter-1 定位，只修改「FormData 與 successful controls」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
聯絡表單畫面有電話欄位，但 Apps Script 的 request 一直收不到 phone。
起始狀態：表單含四種控制項，尚未檢查實際 FormData entries。
entryCount=2、keys=name/newsletter，且 missingNameIncluded=false、disabledIncluded=false。
驗收證據：entryCount=2、keys 含 name/newsletter、missingNameIncluded=false、disabledIncluded=false
需要以 fetch 或原生送出把表單欄位轉成 multipart/form-data 或 URLSearchParams 前。
常見混淆：元素的 id 用於 DOM/label 關聯；name 才是表單提交欄位名稱，兩者不能互相替代。
這段程式是理解起點，不是要你直接跳過 Starter。
FormData 像是在送出前打包表單，但只會收進有郵寄標籤 name、目前可以送出的欄位。
正式說法：FormData(form) 依 HTML form data set construction 規則收集 successful controls 的 name/value pairs。
const payload = new FormData(form); console.table([...payload.entries()]);每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/contact.html 定位：先用 [...new FormData(form).entries()] 直接看實際 key/value，不先猜後端問題。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先用 [...new FormData(form).entries()] 直接看實際 key/value，不先猜後端問題。」目前的缺口。
證據：保存 files/starter/contact.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/contact.html，且定位到 先用 [...new FormData(form).entries()] 直接看實際 key/value，不先猜後端問題。。
檔案：files/starter/contact.html 定位：先用 [...new FormData(form).entries()] 直接看實際 key/value，不先猜後端問題。
要做：從混合欄位表單建立 FormData，列出 entries 並核對缺 name 與 disabled 欄位未被收錄。
預期：entryCount=2、keys=name/newsletter，且 missingNameIncluded=false、disabledIncluded=false。
證據：entryCount=2、keys 含 name/newsletter、missingNameIncluded=false、disabledIncluded=false
卡住先查：先用 [...new FormData(form).entries()] 直接看實際 key/value，不先猜後端問題。
檔案：files/starter/contact.html 定位：先用 [...new FormData(form).entries()] 直接看實際 key/value，不先猜後端問題。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：entryCount=2、keys=name/newsletter，且 missingNameIncluded=false、disabledIncluded=false。
證據：entryCount=2、keys 含 name/newsletter、missingNameIncluded=false、disabledIncluded=false
卡住先查：先用 [...new FormData(form).entries()] 直接看實際 key/value，不先猜後端問題。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先比較每個 input 是否有 name，以及是否 disabled。
把 new FormData(form) 展開成 entries，再以 key 搜尋兩個應被排除欄位。
完整解答與原因：具 name 的文字欄位與已勾選 checkbox 會進 entries；缺 name 與 disabled 欄位不會進入 form data set，因此 entryCount 應為 2。