HTMLのfieldset要素とは？legendとの使い方を解説

💡 この記事でわかること

fieldset要素・legend要素とは何か
基本的な書き方
グループ化するメリット
radioボタンとの組み合わせ例、disabled属性の使い方
初心者がつまずきやすいポイント

1. fieldset要素・legend要素とは？

fieldset要素とは、
👉 フォームの中で関連する入力項目をひとまとめにグループ化するタグです。

legend要素は、そのfieldsetに対する「見出し」を付けるためのタグで、fieldsetとセットで使います。

「お届け先情報」「お支払い方法」のように、複数の入力欄をひとつの意味あるまとまりとして扱いたいときに使います。

👉 formタグについての記事はこちら

2. 基本的な書き方

fieldset要素の中に、まずlegend要素で見出しを書き、そのあとに入力項目を並べます。

<fieldset>
  <legend>お届け先情報</legend>

  <label for="name">お名前</label>
  <input type="text" id="name" name="name">

  <label for="address">ご住所</label>
  <input type="text" id="address" name="address">
</fieldset>

👉 label要素についての記事はこちら

💡 ブラウザの標準スタイルでは、fieldsetに枠線が、legendにはその枠線に食い込む形の見出しが自動的に表示されます。何もCSSを書かなくても、見た目でグループが分かるようになっています。

3. グループ化するメリット

見た目で構造が分かりやすくなる

入力項目が多いフォームでも、fieldsetで区切ることで「今どの情報を入力しているセクションなのか」がひと目で分かりやすくなります。

スクリーンリーダーでも意味が伝わる

スクリーンリーダーがfieldset内の入力欄にフォーカスすると、legendの内容もあわせて読み上げられます。「これは何のグループの入力欄か」が音声でも伝わるため、視覚的なデザインだけに頼らないアクセシビリティの向上につながります。

4. radioボタンとの組み合わせ例

「複数の選択肢から1つを選ぶ」radioボタンのグループは、fieldset/legendとの相性が特に良い代表例です。

<fieldset>
  <legend>お支払い方法</legend>

  <label><input type="radio" name="payment" value="credit"> クレジットカード</label>
  <label><input type="radio" name="payment" value="cod"> 代金引換</label>
  <label><input type="radio" name="payment" value="bank"> 銀行振込</label>
</fieldset>

👉 input要素・type属性についての記事はこちら

💡 「name属性が同じradioボタンの集まり」という論理的なグループと、「fieldsetで囲んだ見た目のグループ」が一致していると、コードとしても読みやすくなります。

5. disabled属性でグループごと無効化する

fieldset要素にdisabled属性を付けると、その中にあるすべての入力欄をまとめて無効化できます。1つずつの入力欄にdisabledを書く必要はありません。

<fieldset disabled>
  <legend>現在受付を停止しています</legend>
  <label for="campaign">キャンペーンコード</label>
  <input type="text" id="campaign" name="campaign">
</fieldset>

6. 初心者がつまずきやすいポイント

legendをfieldsetの最初に書かない

legend要素は、fieldset要素の中で最初の子要素として書く必要があります。他の入力欄のあとにlegendを書いてしまうと、見出しとして正しく認識されないことがあります。

divとh3タグで代用してしまう

見た目だけを整えたくてdivとh3タグの組み合わせで代用してしまうと、fieldset/legendが持つ「グループと見出しの意味的な結びつき」が失われ、スクリーンリーダーにも伝わらなくなります。

デフォルトの見た目を変えたい場合はCSSで上書きする

fieldsetの枠線やlegendの位置は、border・paddingなどのCSSプロパティで自由に調整できます。「デザインに合わないから使わない」のではなく、タグはそのまま使ってCSSだけ上書きするのがおすすめです。

まとめ

この記事では、HTMLのfieldset要素・legend要素の使い方について解説しました。

fieldsetは関連する入力項目をグループ化するタグ
legendはfieldsetの見出しを付けるタグで、最初の子要素として書く
radioボタンのグループなど、論理的なまとまりとの相性が良い
disabled属性でグループごと入力欄を無効化できる
divやh3タグでの代用は避け、意味的な結びつきを保つ

ここまでinput・select・label・textarea・fieldsetと紹介してきたフォーム部品を組み合わせれば、実務でよくあるお問い合わせフォームは一通り作れるようになります。ぜひ実際に手を動かして組み合わせてみてください。