之前開發表單功能時，我通常用 `<form>` 來包裹 `<input>`，最近發現有一個 `<fieldset>` 標籤，也可以搭配 `<form>` 來使用。這個 `<fieldset>` 到底是什麼？跟 `<form>` 有什麼不同？

## `<form>` vs `<fieldset>`

`<form>` 是 HTML 裡用來處理**資料提交**的主要容器。

- 包裝整體表單內容（欄位、按鈕等）

<form action="/submit" method="post">
  <input type="text" name="username" />
  <button type="submit">送出</button>
</form>

`<fieldset>` 是一種**群組相關表單欄位**的標籤。

- 不負責資料提交
- `<fieldset>` 的 `disabled` 屬性可以讓整組欄位無法操作

<fieldset>
  <legend>文章屬性</legend>
  <label>
    <input type="checkbox" name="text" />
    最新消息：
  </label>
  <label>
    <input type="checkbox" name="type" />
    是否發布：
  </label>
</fieldset>

## 比較：`<form>` vs `<fieldset>`

| 功能 | `<form>` | `<fieldset>` |
|------------------------------|-----------------------------------------|------------------------------------------|
| 提交資料 | 可提交 | 不負責提交 |
| 結構化欄位 | 可用但非語意 | 語意強、分組明確 |
| 可搭配 `<legend>` 使用 | 無 | 常見搭配，提升理解性 |
| 無障礙支援（a11y） | 一般支援 | 更優（默讀機認識群組標題） |

## 結論

- 表單送出用 `<form>`
- 群組欄位（如一組 radio 或 checkbox）用 `<fieldset>`
- `fieldset` 內通常不放整體送出按鈕，而是放在 `<form>` 裡的最外層
- `fieldset + legend` 可以讓畫面與語意都更清晰，尤其是複雜的表單結構