入力欄をまとめて無効にしたい：fieldsetのdisabledとlegendの例外を試そう

住所や連絡先の入力欄を、いくつもまとめて使えなくしたい。一つずつdisabledを付ける以外に、fieldsetでグループを作る方法があるよ。

このページでは、HTMLの入力グループを無効にする流れと、その例外を知る。ブラウザがあれば試せるよ。入力値はすべて架空で、フォームを外部へ送信したり保存したりしない作例だよ。

fieldsetは関連する入力をまとめる

fieldsetは、関連するフォーム部品をまとめる要素。legendは、そのグループへ見出しを付ける要素だよ。

<fieldset disabled>
  <legend>配送先</legend>
  <label>宛名 <input name="destination" value="練習用"></label>
</fieldset>

このfieldsetにdisabledが付くと、配下の入力欄は無効になる。通常は編集やフォーカスの対象にならず、フォームデータにも含まれない。

グレーに見えるかなどの細部はブラウザの表示によるので、色だけを確認するのではなく、操作できるかや送るデータを一緒に見よう。

最初のlegendの中は例外になる

<fieldset disabled>
  <legend>
    <label>グループ名 <input name="groupTitle" value="配送先"></label>
  </legend>
  <label>宛名 <input name="destination" value="練習用"></label>
</fieldset>

fieldsetの最初のlegend要素の中にあるフォーム部品は、このfieldsetによる無効化から除かれる。この例では、宛名は無効でも、legendの中のグループ名は操作できるよ。

実際の画面では、グループを使うか選ぶスイッチを見出しの中へ置く設計などに使える。今回は例外が分かるよう、文字の入力欄で比べている。

子に属性がなくても無効になる

グループの宛名入力自身には、disabled属性を書いていない。それでも、親のfieldsetによって実際の状態は無効になる。

JavaScriptで入力欄自身のdisabledプロパティを見るとfalseでも、:disabledという状態の条件には一致することがあるんだ。属性が一つ付いたかだけで、利用者が操作できるかを決めつけないようにしよう。

const input = document.querySelector('[name="destination"]');
console.log(input.disabled);             // この例ではfalse
console.log(input.matches(':disabled'));// この例ではtrue

作例で入力とデータを比べる

1. 「グループを無効にする」がオンのまま、宛名欄が操作できないことを見る。
2. legendの中のグループ名は操作できることを確認する。
3. 「データを確認」を押し、グループ名と、グループ外の注文番号だけが入ることを見る。
4. スイッチをオフにし、宛名とギフトの値もデータへ加わることを確認する。
5. 「最初から試す」で値と無効化の状態を初期状態へ戻す。

作例はFormDataという仕組みで名前と値を取り出して表示するだけ。チェック済みのギフトも、グループが無効なら含まれないよ。グループ外の注文番号は、切り替えても対象外のままなんだ。

入れ子や別の指定は別に確認する

fieldsetを入れ子にしたり、入力欄自体へdisabledを付けたりすると、他の無効化の条件も残る。親のスイッチを解除したら、必ず全部が操作可能になるとは一般化しないでね。今回の作例は一つのfieldsetだけを使っている。

また、入力を無効にすることは、値や権限を安全に守る仕組みではない。サーバーへ値を受け取る実装では、画面の属性を信用せず、必要な値や権限を受信側で確認しよう。

編集部では2026年10月29日にHTML標準とMDNを確認し、二つの状態、legendの例外、実際の無効状態、FormDataとリセットをChromiumで検証した。disabledとreadonly、nameとフォームデータも合わせて確認しよう。