path: root/files/ja/web/html/element/fieldset/index.html

---
title: '<fieldset>: フィールドセット要素'
slug: Web/HTML/Element/fieldset
tags:
  - Element
  - Forms
  - HTML
  - HTML forms
  - Reference
  - Web
translation_of: Web/HTML/Element/fieldset
---
<div>{{HTMLRef}}</div>

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

<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

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

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p>

<dl>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>この論理型属性が設定されている場合、 &lt;fieldset&gt; の子孫要素として配置したフォームコントロールはすべて無効になり、つまり編集したり {{htmlelement("form")}} と一緒に送信したりすることができなくなります。マウスクリックやフォーカス関連のイベントのような閲覧イベントを受け取らなくなります。既定では、ブラウザーはそのようなコントロールを灰色で表示します。なお、子孫の {{HTMLElement("legend")}} 要素の中のフォーム要素は無効になりません。</dd>
 <dt>{{htmlattrdef("form")}}</dt>
 <dd>{{HTMLElement("form")}} 要素の {{htmlattrxref("id")}} 属性を指定し、 <code>&lt;fieldset&gt;</code> 要素はたとえその中になくても、その一部とすることができます。なお、 <code>&lt;fieldset&gt;</code> 内の {{HTMLElement("input")}} 要素をフォームに関連付けたい場合は、それらの要素に直接 <code>form</code> 属性を使用する必要があります。どの要素がフォームに関連付けられているかは、 JavaScript で {{domxref("HTMLFormElement.elements")}} を使用して確認することができます。</dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>グループに関連付けられた名前です。
 <div class="note"><strong>注</strong>: fieldset 要素自身のラベルの役割は、その最初の子要素として配置した {{HTMLElement("legend")}} 要素が担います。</div>
 </dd>
</dl>

<h2 id="Styling_with_CSS" name="Styling_with_CSS">CSS でのスタイル付け</h2>

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

<p>{{cssxref("display")}} の値は既定で <code>block</code> であり、<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>を確立します。 <code>&lt;fieldset&gt;</code> がインラインレベルの <code>display</code> の値でスタイル付けされた場合は <code>inline-block</code> として動作し、そうでなければ <code>block</code> として動作します。既定では、コンテンツを囲む <code>2px</code> <code>groove</code> の境界線があり、少量の既定のパディングがあります。要素は既定で {{cssxref("min-inline-size", "min-inline-size: min-content")}} を持ちます。</p>

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

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

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

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Simple_fieldset" name="Simple_fieldset">単純なフィールドセット</h3>

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

<pre class="brush: html notranslate">&lt;form action="#"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Simple fieldset&lt;/legend&gt;
    &lt;input type="radio" id="radio"&gt;
    &lt;label for="radio"&gt;Spirit of radio&lt;/label&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('Simple_fieldset', '100%', '80') }}</p>

<h3 id="Disabled_fieldset" name="Disabled_fieldset">無効化したフィールドセット</h3>

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

<pre class="brush: html notranslate">&lt;form action="#"&gt;
  &lt;fieldset disabled&gt;
    &lt;legend&gt;Disabled fieldset&lt;/legend&gt;
    &lt;div&gt;
      &lt;label for="name"&gt;Name: &lt;/label&gt;
      &lt;input type="text" id="name" value="Chris"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for="pwd"&gt;Archetype: &lt;/label&gt;
      &lt;input type="password" id="pwd" value="Wookie"&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('Disabled_fieldset', '100%', '110') }}</p>

<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a></th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document#Sectioning_root">区分化ルート</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form-associated_content">フォーム関連</a>要素, 知覚可能コンテンツ</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td>任意の {{HTMLElement("legend")}} 要素と、それに続くフローコンテンツ</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td>{{ARIARole("group")}}</td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>{{ARIARole("radiogroup")}}, {{ARIARole("presentation")}}, {{ARIARole("none")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLFieldSetElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td><code>fieldset</code> 要素を定義</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '&lt;fieldset&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.elements.fieldset")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{HTMLElement("legend")}} 要素</li>
 <li>{{HTMLElement("input")}} 要素</li>
 <li>{{HTMLElement("label")}} 要素</li>
 <li>{{HTMLElement("form")}} 要素</li>
</ul>