HTML の <fieldset> 要素は、ウェブフォーム内のラベル (<label>) などのようにいくつかのコントロールをグループ化するために使用します。

上記の例にあるように、 <fieldset> 要素は HTML フォームの一部をグループ化し、内側の <legend> 要素で <fieldset> のラベル/タイトルを提供しています。いくつかの属性を取りますが、特に重要なものとして form は、同じページの <form>id を含むことができ、 <fieldset><form> の中になくてもその一部として扱うことができたり、 disabled は、 <fieldset> およびその中身を一度に無効にすることができたりします。

メモ: <fieldset> 要素は、新たなブロック整形文脈を作るものであると想定されています (HTML5 仕様書 を参照)。

属性

この要素にはグローバル属性があります。

disabled
この論理型属性が設定されている場合、 <fieldset> の子孫要素として配置したフォームコントロールはすべて無効になり、つまり編集したり <form> と一緒に送信したりすることができなくなります。マウスクリックやフォーカス関連のイベントのような閲覧イベントを受け取らなくなります。既定では、ブラウザーはそのようなコントロールを灰色で表示します。なお、子孫の <legend> 要素の中のフォーム要素は無効になりません。
form HTML5
関連する <form> 要素の id 属性を指定し、これと自身を結び付けます。(関連する form 要素の子孫要素として配置されている場合、)初期値は祖先要素の内で直近の <form> 要素の id となります。
name HTML5
グループに関連付けられた名前です。
fieldset 要素自身のラベルの役割は、その最初の子要素として配置した <legend> 要素が担います。

CSS でのスタイル付け

<fieldset> に特殊なスタイル付けの考慮事項はありません。 display の値は既定で block であり、ブラウザーは一般に既定のスタイルとしてコンテンツの周りに 1px solid black の境界線を引き、少量の既定のパディングを入れます。 <legend> が存在する場合は、上の境界の上に配置されます。

ページデザインに合わせるために、好きな方法で <fieldset> および <legend> に気軽にスタイル付けしてみてください。

メモ: 他のほとんどの要素と異なり、 WHATWG HTML Rendering 仕様書では <fieldset> の既定のスタイルに min-width: min-content を含めることを勧めており、多くのブラウザーがこのスタイル (またはよく似たスタイル) を実装しています。

単純なフィールドセット

この例は、本当に単純な <fieldset> の例で、 <legend> および1つのコントールが中にあります。

<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio">
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>

無効化したフィールドセット

この例は無効化した <fieldset> で、二つのコントロールが中にあります。なお、両方のコントロールは無効化した <fieldset> の中にあるので、無効になります。

<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="name" id="text" value="Chris">
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="text" value="Wookie">
    </div>
  </fieldset>
</form>

技術概要

コンテンツカテゴリー フローコンテンツ, 区分化ルート, リスト化, フォーム関連要素, 知覚可能コンテンツ
許可されている内容 任意の <legend> 要素と、それに続くフローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素
許可されている ARIA ロール group, presentation
DOM インターフェイス HTMLFieldSetElement

仕様書

仕様書 状態 備考
HTML Living Standard
<fieldset> の定義
現行の標準 fieldset 要素を定義
HTML5
<fieldset> の定義
勧告  
HTML 4.01 Specification
<fieldset> の定義
勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり あり あり あり
disabled あり あり あり あり1126
form あり あり あり あり あり あり
name あり あり あり あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり
disabled4.4 あり あり ? ?6 あり
form あり あり あり あり あり あり あり
name あり あり あり あり あり あり あり

1. Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type='file'] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type='text'] within fieldset[disabled].

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yuheiy, yyss, ethertank
最終更新者: mfuji09,