先看這個例子
兩個 fieldset 把畫面分組,各有 legend。這份單一文件內,單選 name 分別是 size 和 ink,才令它們各自成組。起初揀「細字」和「深色」,再改揀「大字」和「綠色」。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 起始狀態 | 查看已選項 | small、dark 已選 |
| 選大字 | 啟用 large | large、dark 已選 |
| 再選綠色 | 啟用 green | large、green 已選;small、dark 未選 |
瀏覽器怎樣處理
單選分組要看 name、所在樹及所屬 form 等因素。本例全部在同一棵樹,沒有 form 所屬,因此以不同 name 分開。只用不同 fieldset,不能抵消相同 name 的分組。本例只改原生選取狀態,不會替整頁套字級或主題色。
fieldsets 分開了,相同 name 仍會互相取消
反例雖然分兩個 fieldset,兩個控制項卻同用 name="choice"。在本例的同樹、無 form 所屬情況下,選綠色會取消大字。
<fieldset><legend>文字大小</legend><label><input id="large" type="radio" name="choice" checked>大字</label></fieldset><fieldset><legend>用色</legend><label><input id="green" type="radio" name="choice">綠色</label></fieldset>選綠色後,只有 green 已選;兩個 fieldset 未能保留兩項獨立選擇。
試着修正
新增「中字」作第三個字級,應用哪個 name?揀它會否影響綠色?
查看參考答案
用 name="size」,讓中字取代現時所選字級。綠色仍用 name="ink」,選取狀態不受影響。
- 每次選擇後,核對四個控制項的已選狀態。
- 標籤和圖例要寫清楚真正選的是甚麼。