仕様

FIELDSET要素は、
オプションで
キャプションを使用して
グループ化された
フォームコントロール
（または他のコンテンツ）の
セットを表します。

fieldsetグループ化されたフォームコントロールのセット (form control group)
カテゴリ
  • フローコンテンツ
  • パルパブルコンテンツ
  • セクショニング・ルート
  • リストされた要素
  • 自動大文字化継承要素
  • フォーム関連要素
種類通常要素
この要素を
使用できる
状態		フローコンテンツを受け入れる要素。
許可されて
いる内容		legend要素とフローコンテンツ。
属性グローバル属性,
form
フォーム要素に関連付け
name
要素の名前
disabled
内部の凡例を除いて、子孫フォームコントロールが無効になっているかどうか
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		none, presentation, radiogroup.
[既定値 : group]
DOM
インター
フェイス
HTMLFieldSetElement
  1. [Exposed=Window]
  2. interface HTMLMeterElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute boolean disabled;
  6. readonly attribute HTMLFormElement? form;
  7. [CEReactions] attribute DOMString name;
  8.  
  9. readonly attribute DOMString type;
  10.  
  11. [SameObject] readonly attribute HTMLCollection elements;
  12.  
  13. readonly attribute boolean willValidate;
  14. [SameObject] readonly attribute ValidityState validity;
  15. readonly attribute DOMString validationMessage;
  16. boolean checkValidity();
  17. boolean reportValidity();
  18. undefined setCustomValidity(DOMString error);
  19. };
レンダリング
フィールドセットと凡例の要素
  1. fieldset {
  2. display: block;
  3. margin-inline-start: 2px;
  4. margin-inline-end: 2px;
  5. border: groove 2px ThreeDFace;
  6. padding-block-start: 0.35em;
  7. padding-inline-end: 0.75em;
  8. padding-block-end: 0.625em;
  9. padding-inline-start: 0.75em;
  10. min-inline-size: min-content;
  11. }

CSS を大雑把に読むと、 フローレイアウトに配置されたときにブロックレベルのボックスを生成します。 インライン方向の前後(左右)の余白を 2px 空けます。 窪んだ境界線をひきます。 要素の周囲の余白を適度に空けます。 最小の寸法を指定します。 などになります。

参加
コンテキスト		ブロックフォーマットコンテキスト
確立
コンテキスト		ブロックフォーマットコンテキスト
fieldset要素は、フォームコントロール等のセットを表します。

オプションでキャプションを使用してグループ化されたフォームコントロール(または他のコンテンツ)のセットを表します。

  1. <div>
  2. <fieldset>
  3. <legend>
  4. <h3>Heading</h3>
  5. </legend>
  6. <div>text</div>
  7. </fieldset>
  8. </div>

Heading
text
参照元
  1. HTML Living Standard. 4.10.15 The fieldset element
  2. HTML Living Standard. 15 Rendering 15.3.12 The fieldset and legend elements
  3. HTML 5.2 W3C 勧告. 4.10.15 The fieldset element
  4. HTML 4.01 Specification W3C 勧告. 17.10 Adding structure to forms: the FIELDSET and LEGEND elements
  5. MDN Web Docs. HTML <fieldset>: フィールドセット要素

使用可能な箇所

フローコンテンツを
受け入れる要素に
配置できます。

fieldset要素は、フローコンテンツを受け入れる要素に配置できます。

  1. <div>
  2. <fieldset>text</fieldset>
  3. </div>

フローコンテンツを配置できる div要素のコンテンツの一部として、fieldset要素を配置できます。

text

配置できるコンテンツ

legend要素と
フローコンテンツを
配置できます。

fieldset要素は、legend要素とフローコンテンツを配置できます。

  1. <fieldset>
  2. <legend>legend</legend>
  3. <div>text</div>
  4. </fieldset>

fieldset要素のコンテンツの一部として、フローコンテンツである div要素を配置できます。

legend
text

属性

form属性

  1. <fieldset form="ifmForm">
  2. <legend>legend</legend>
  3. <div>text</div>
  4. </fieldset>
  5. <form id="ifmForm" action="./fmreceive.htm">
  6. </form>

form属性は、form要素の id属性値を設定します。要素を form要素に関連付けます。省略したときは、最も近い祖先の form要素に関連付けられます。

legend
text

name属性

  1. <form>
  2. <fieldset name="nfs5">
  3. <legend>legend</legend>
  4. <div>text</div>
  5. </fieldset>
  6. </form>

name属性は、要素の名前を指定します。form.elements APIで使用する要素の名前です。

legend
text

disabled属性

  1. <form>
  2. <fieldset disabled>
  3. <legend>legend</legend>
  4. <input type="radio" name="nipFs61" checked>
  5. <input type="radio" name="nipFs61">
  6. </fieldset>
  7. </form>

disabled属性は、ユーザーがそのコントロールを利用できないことを示す論理属性です。

legend

気を付ける点

キャプション

子要素に legend要素を配置した場合に、fieldset要素の余白に注意が必要だと思います。 表示する幅により legend要素も折り返しが行われ、表示する高さが変わり必要とする領域も変わります。

グループ化

fieldset要素は、グループ化されたフォームコントロール（または他のコンテンツ）のセットを表しますが、ラジオボタンのグループ化には関わりません。
input要素の type属性が radio と設定されたラジオボタンは、name属性に同じ値を設定する事でグループを定義します。 fieldset要素の内外で同じ name属性値を持つラジオボタンがあれば、それらは１つのラジオボタングループを形成します。

CSSリセット

  1. fieldset {
  2. padding: 0.35em 0.75em 0.625em;
  3. }

normalize.css というリセットCSS の一部で、すべてのブラウザでフォントスタイルを変更します。 Firefoxのパディングを修正します。
詳細は理解していないのですが、いろいろとバグ等の対応も含んでいる様なので、利用する事をお勧めします。