HTML 表單分組 fieldset 與 legend：把相關欄位群組起來

此元素用於 表單 元素的分組，<legend> 則是這一組的標題，而且必須放在第一個。它對單選按鈕這種成組的欄位最有價值，螢幕閱讀器會一併讀出組名；disabled 還能一次停用整組欄位。

• <fieldset>: 包覆表單元素的容器。
• <legend>: 該分組內的標題。

屬性

disabled

指定功能為不啟用的狀態。

單選按鈕最需要它

<fieldset>
  <legend>付款方式</legend>

  <input type="radio" id="credit" name="payment" value="credit">
  <label for="credit">信用卡</label>

  <input type="radio" id="atm" name="payment" value="atm">
  <label for="atm">ATM 轉帳</label>
</fieldset>

每個選項有自己的 <label>，但 這組在問什麼 只能靠 <legend> 說明。少了它，螢幕閱讀器的使用者只會聽到信用卡與 ATM 轉帳，卻不知道在選什麼。

<legend> 必須是 <fieldset> 的第一個子元素。

一次停用整組欄位

<fieldset disabled>
  <legend>收件資訊</legend>
  ...
</fieldset>

分步驟的 表單 常用它鎖住尚未輪到的區塊。

常見問題

legend 一定要寫嗎？

強烈建議。它必須是 <fieldset> 的第一個子元素，螢幕閱讀器讀到組內每個欄位時都會先帶出這個標題，使用者才知道這組在問什麼。

fieldset 的 disabled 有什麼特別？

加在 <fieldset> 上會一次停用組內所有欄位，不必逐個設定。分步驟的表單常用它來鎖住尚未輪到的區塊。

什麼時候該用 fieldset？

一組單選按鈕或核取方塊共用同一個問題時最需要它。較長的表單也可以依主題分成收件資訊、付款方式等區塊，讓結構更清楚。

延伸閱讀

表單 <form>輸入 <input>說明 <label>