radio 與下拉選單

Radio

同一組 radio 用相同的 name 綁在一起，同一時間只能選一個。label 的 for 對到 input 的 id 之後，點文字就會選到那個 radio，焦點也會移過去。點擊範圍從一個小圓點變成整段文字，螢幕閱讀器也知道這段文字在描述哪個控制項。

fieldset 把整組包起來，legend 是這組的標題。

<form>
  <fieldset>
    <legend>Select a maintenance drone:</legend>

    <div>
      <input type="radio" id="huey" name="drone" value="huey" checked />
      <label for="huey">Huey</label>
    </div>

    <div>
      <input type="radio" id="dewey" name="drone" value="dewey" />
      <label for="dewey">Dewey</label>
    </div>

    <div>
      <input type="radio" id="louie" name="drone" value="louie" />
      <label for="louie">Louie</label>
    </div>
  </fieldset>

  <button type="submit">送出</button>
</form>

屬性	作用
`id`	這個控制項自己的識別，給 `label for` 對應
`for`	指向要關聯的 `id`。點 label 等於點那個 input
`name`	同一組 radio 必須相同。送出時欄位名稱也是它
`value`	這個選項被選中時，表單送出的值
`checked`	預設先選這一項。一組裡通常只標一個
`fieldset` / `legend`	把選項包成一組，並提供組名

送出後，瀏覽器帶的是 drone=huey 這種 name=value。沒被選到的選項不會送出。

把 input 包在 label 裡面時，可以省略 for 和 id，點文字一樣會選到：

<label>
  <input type="radio" name="drone" value="huey" checked />
  Huey
</label>

id 在同一頁必須唯一。如果這組選項會重複出現（例如列表裡每一列都有一組 radio），id 要各自不同，name 也要依「這一組」分開，避免不同列互相搶選項。

下拉選單

<select> 是原生下拉選單，關聯方式和 radio 一樣：label for 對到 select id。點標籤會把焦點移到選單，鍵盤使用者接著可以用方向鍵或空白鍵展開。

<form>
  <label for="drone">Maintenance drone</label>
  <select id="drone" name="drone" required>
    <option value="">請選擇</option>
    <option value="huey">Huey</option>
    <option value="dewey" selected>Dewey</option>
    <option value="louie">Louie</option>
  </select>

  <button type="submit">送出</button>
</form>

屬性	作用
`id` / `for`	和 radio 相同，點 label 會聚焦這個 select
`name`	送出時的欄位名稱
`option value`	實際送出的值。畫面上顯示的是標籤文字
`selected`	預設選中的項目，相當於 radio 的 `checked`
`required`	第一個空值選項當提示時，沒選就不能送出
`disabled`	加在某個 `option` 上，該項不能選

選項很多時，用 optgroup 分組。label 是組名，不會被送出：

<label for="city">城市</label>
<select id="city" name="city">
  <option value="">請選擇</option>
  <optgroup label="北部">
    <option value="tpe">台北</option>
    <option value="ntp">新北</option>
  </optgroup>
  <optgroup label="中部">
    <option value="txg">台中</option>
  </optgroup>
</select>

要一次選多個，加上 multiple。按住 Ctrl（macOS 為 Command）可以加選，送出時同一個 name 會帶多個值：

<label for="drones">Drones</label>
<select id="drones" name="drones" multiple size="3">
  <option value="huey">Huey</option>
  <option value="dewey">Dewey</option>
  <option value="louie">Louie</option>
</select>

size 決定一次露出幾列。有 multiple 或 size 大於 1 時，控制項會變成列表，不再是點一下才展開的下拉。

Radio​

下拉選單​

Radio

下拉選單