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

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

属性

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

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

CSS でのスタイル付け

<fieldset> には、スタイル付けの特殊な考慮事項がいくつかあります。

display の値は既定で block であり、ブロック整形コンテキストを確立します。 <fieldset> がインラインレベルの display の値でスタイル付けされた場合は inline-block として動作し、そうでなければ block として動作します。既定では、コンテンツを囲む 2px groove の境界線があり、少量の既定のパディングがあります。要素は既定で min-inline-size: min-content を持ちます。

<legend> が存在する場合は、 block-start 境界線の上に配置されます。 <legend> は縮小折り返しであり、整形コンテキストを確立します。 display の値はブロック的です (例えば、 display: inlineblock として動作します)。

<fieldset> の内容を保持する無名のボックスが生成され、 <fieldset> から特定のプロパティを継承します。 <fieldset>display: grid または display: inline-grid でスタイル付けされていた場合、無名ボックスはグリッド整形コンテキストになり、 <fieldset>display: flex または display: inline-flex でスタイル付けされていた場合、無名ボックスはフレックス整形コンテキストになります。それ以外の場合はブロック整形コンテキストになります。

<fieldset> および <legend> に対しては、ページデザインに合うあらゆる方法で気軽にスタイル付けしてください。

メモ: この記事の執筆時点で、 Microsoft Edge と Google Chrome にはフレックスボックスグリッドレイアウトが <fieldset> の中に置けないというバグがあります。この GitHub の課題がバグ追跡のリンクです。

単純なフィールドセット

この例は、本当に単純な <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> の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
disabledChrome 完全対応 ありEdge 部分対応 一部
補足
部分対応 一部
補足
補足 Does not work with nested fieldsets. For example: <fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset>
Firefox 完全対応 ありIE 完全対応 あり
補足
完全対応 あり
補足
補足 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].
Opera 完全対応 12Safari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 ありEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS 完全対応 6Samsung Internet Android 完全対応 あり
formChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
nameChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
部分対応  
部分対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

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