本頁只練什麼
能把同一問題的 radio 組成有名稱的表單群組。
單顆 radio label 不會自動告訴語音使用者整組在回答什麼問題。
要修改的檔案：files/starter/contact.html
定位：先確認兩個 radio 是同一題。｜依 starter-2 定位，只修改「fieldset 與 legend」的責任。
LESSON-03 · TOPIC 02
fieldset 與 legend
能把同一問題的 radio 組成有名稱的表單群組。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
兩個 radio 沒有共同問題名稱。
起始狀態：radio 只放在 div，且沒有 name。
完成後要看到
grouped=true、legendText 正確、radioCount=2、sharedName=true。
驗收證據：grouped、legendText、radioCount、sharedName
何時會用到
聯絡偏好、方案類型、是否題等同題多選項。
常見混淆：legend 不取代每個 input label；div 加邊框也沒有同等語意。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
fieldset 與 legend Fieldset and legend form grouping
fieldset 把同一題的選項圈成一組，legend 是這組的題目。
正式說法：fieldset 表示相關表單控制項群組，legend 提供 caption，radio 透過共用 name 建立單選契約。
fieldset 內先放偏好聯絡方式 legend，再放共用 name 的兩個 radio。三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/contact.html定位：先確認兩個 radio 是同一題。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先確認兩個 radio 是同一題。」目前的缺口。
證據：保存 files/starter/contact.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/contact.html，且定位到 先確認兩個 radio 是同一題。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/contact.html定位：先確認兩個 radio 是同一題。要做：建立 fieldset/legend 並統一 radio name，再檢查群組。
預期：grouped=true、legendText 正確、radioCount=2、sharedName=true。
證據：grouped、legendText、radioCount、sharedName
卡住先查：先確認兩個 radio 是同一題。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/contact.html定位：先確認兩個 radio 是同一題。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：grouped=true、legendText 正確、radioCount=2、sharedName=true。
證據：grouped、legendText、radioCount、sharedName
卡住先查：先確認兩個 radio 是同一題。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
fieldset 與 legendruntime fixture · read-only demo
本主題示範畫面：
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
找整組題目，不是單顆 label。
提示 2｜關鍵片段
外層用 fieldset，第一個子元素放 legend。
提示 3｜完整解答與原因
完整解答與原因：用 fieldset 包住兩個共用 name 的 radio，以 legend 寫偏好聯絡方式；因為 legend 是整組的語意 caption。