INTEGRATED LAB · Starter

多頁導覽與原生表單｜整合 Lab

在同一份章節作品中整合 4 個 module，排除單項通過但組合失敗的問題。

最後整合任務

交付：完成可跨頁到達、可被輔助技術理解且能觀察 GET payload 的聯絡表單。

將同一組責任轉用到另一個商家情境，仍達成：完成可跨頁到達、可被輔助技術理解且能觀察 GET payload 的聯絡表單。

限制：不新增框架。；保留 module id 與驗收證據。

開啟本階段整合檔案 →回到自主學習入口

依序回看每個 topic

整合不是重新背一遍名詞；是把每個 topic 的責任放回同一份作品。

1. nav aria-label
files/starter/index.html｜navCount=2、labels 正確、unique=true
回到 topic 說明
2. fieldset 與 legend
files/starter/contact.html｜grouped、legendText、radioCount、sharedName
回到 topic 說明
3. autocomplete 與 inputmode
files/starter/contact.html｜autocompleteValues 與 inputModeValues 全部符合用途
回到 topic 說明
4. GET query string 與 POST 概念差異
files/starter/contact.html｜search 含 service/name、paramCount=2、href 有問號且零遠端請求
回到 topic 說明

四個整合停點

每個停點都要留下檔案、畫面或瀏覽器證據。

Step 1｜觀察整合 Starter 並找出第一個未通過 module。
檔案：files/starter/index.html　定位：#observe
操作：逐項讀取 outcomes，執行一次現況操作。
```
// OBSERVE：不修改程式，先記錄第一個失敗 moduleId。
```
預期：能指出第一個未通過 module。
證據：第一個 moduleId 與缺少的 evidence。
卡住先查：確認開啟的是 files/starter/index.html。
Step 2｜依 module 順序修改，一次只加入一個責任。
檔案：files/starter/index.html　定位：#modify
操作：為兩個 nav 分別設定不同 aria-label，再讀取名稱清單。 → 建立 fieldset/legend 並統一 radio name，再檢查群組。 → 套用三個欄位對應的 autocomplete/inputmode，讀取 DOM properties。 → 以兩個本地參數建立 query，用 history.replaceState 更新 URL 並顯示結果。
```
// 03-01-nav-aria-label: 為兩個 nav 分別設定不同 aria-label，再讀取名稱清單。
// 03-02-fieldset-legend: 建立 fieldset/legend 並統一 radio name，再檢查群組。
// 03-03-autocomplete-inputmode: 套用三個欄位對應的 autocomplete/inputmode，讀取 DOM properties。
// 03-04-get-query-string-post: 以兩個本地參數建立 query，用 history.replaceState 更新 URL 並顯示結果。
```
預期：完成可跨頁到達、可被輔助技術理解且能觀察 GET payload 的聯絡表單。
證據：navCount=2、labels 正確、unique=true；grouped、legendText、radioCount、sharedName；autocompleteValues 與 inputModeValues 全部符合用途；search 含 service/name、paramCount=2、href 有問號且零遠端請求
卡住先查：回到第一個未通過的 module，只修該處。
Step 3｜驗證所有 module 在整合後仍成立。
檔案：files/solution/index.html　定位：#verify
操作：重新整理並依 outcomes 順序重跑所有證據。
```
// VERIFY：逐項記錄 pass/fail，不以看到畫面代替 evidence。
```
預期：4/4 module 通過。
證據：每個 moduleId 都有實際結果與重設後重現紀錄。
卡住先查：若失敗，回到第一個失敗 module，不同時修多項。
Step 4｜把本章責任轉用到不同內容情境。
檔案：files/starter/index.html　定位：#challenge
操作：替另一個商家情境重做，仍達成：完成可跨頁到達、可被輔助技術理解且能觀察 GET payload 的聯絡表單。
```
// CHALLENGE：只替換內容與資料，不新增框架或跳過 self-check。
```
預期：完成可跨頁到達、可被輔助技術理解且能觀察 GET payload 的聯絡表單。
證據：轉用後的作品與全數 module self-check。
卡住先查：先確認共同基底與 module id 未被改壞。

完成本階段後，重新載入並保存整合證據。

回到自主學習入口

多頁導覽與原生表單｜整合 Lab

最後整合任務

依序回看每個 topic

四個整合停點

Step 1｜觀察整合 Starter 並找出第一個未通過 module。

Step 2｜依 module 順序修改，一次只加入一個責任。

Step 3｜驗證所有 module 在整合後仍成立。

Step 4｜把本章責任轉用到不同內容情境。