<fieldset>要素

Technical Summary

Definition / Categories

fieldsetは送信データそのものを表すコントロールではなく、関連するフォームコントロールを構造化するform-associated elementです。グループの子孫にある各コントロールの送信条件は、各要素の仕様に従います。

Legend and content model

<fieldset>
  <legend>連絡方法</legend>
  <label><input type="radio" name="contact" value="email"> メール</label>
  <label><input type="radio" name="contact" value="phone"> 電話</label>
</fieldset>

HTML Standardのcontent modelは、任意のlegendに続くflow contentです。最初のlegend要素の子がグループのcaptionになります。個々のcontrolの名前は、別途labelなどで与えます。

Form association

fieldsetはlisted form-associated elementです。祖先のformに属するほか、form属性で同じdocument内のform ownerを明示できます。

<form id="profile-form"></form>

<fieldset form="profile-form" name="contact-group">
  <legend>連絡方法</legend>
  <input name="email" type="email">
</fieldset>

nameはfieldsetをform.elementsから参照するときの名前として関係します。fieldset自身が、子孫の各コントロールのように値をentry listへ追加するという意味ではありません。

Disabled propagation

<fieldset disabled>
  <legend>現在は利用できません</legend>
  <input name="enabled-by-fieldset">
</fieldset>

disabled属性が指定されたfieldsetは、最初のlegend要素の子孫を除き、子孫のフォームコントロールをdisabledとして扱います。disabled fieldsetの内部にさらにfield setがある場合も、この例外範囲を含めて祖先との関係を確認する必要があります。

DOM Interface

HTMLFieldSetElementは、グループの状態・form owner・内部のフォームコントロール集合をDOMから確認するためのAPIを公開します。

const group = document.querySelector('fieldset');

group.disabled;
group.form;
group.name;
group.elements;
group.willValidate;
group.validity;
group.checkValidity();
group.reportValidity();

Accessibility mapping

HTML-AAMでは、fieldsetはgroupのrole mappingに従い、最初のrendered legend要素との関係からグループ名を得ます。legendがアクセシビリティツリーから隠されている場合、そのlegendは親fieldsetのaccessible nameを提供しません。

したがって、視覚的な枠線をCSSで再現するだけでは、fieldsetの意味を置き換えられません。グループ名として読ませたい文字列は、構造上のlegendとして保持し、個別のcontrolには個別の名前を与えます。

Fact / Evidence（主張 / 根拠）

仕様上の主張と実装観測を分離し、適用条件と確認状態を記録します。

Evidence

1. HTML Standard: The fieldset element — 意味、category、content model、属性、form owner、DOM interface
2. HTML Standard: Enabling and disabling form controls — fieldset disabledの適用条件
3. HTML Accessibility API Mappings: fieldset — group roleとlegendによるaccessible name
4. Web Platform Tests: disabled element event propagation — disabled fieldsetを含むイベント伝播のテスト対応

Implementation Evidence

仕様上の主張とは別に、ブラウザー実装・WPT・アクセシビリティ観測を記録します。未実施の項目は確認済みとは扱いません。

実測fixture / 環境: <form id="evidence-form">内に、通常のfieldset、最初のlegend内のcontrol、legend外のinput、disabled fieldset、入れ子のfieldset、form属性とnameを指定したfieldsetを配置しました。Chrome 152.0.0.0（HeadlessChrome / Windows NT 10.0）で2026-09-13にDOM・フォーム関連APIを実測しています。

WPTの対応付けにはWPTリポジトリ、アクセシビリティの基準にはHTML-AAMを参照します。

Coverage / Open Issues

• 確認済みfieldsetの意味、category、content model、legend、disabled、form、nameの仕様上の入口
• 確認済みHTMLFieldSetElementの主要APIと、HTML-AAMのgroup / legend mapping
• 未完了複数ブラウザーにおけるdisabled propagation、nested fieldset、fieldset.elementsの実装比較
• 未完了WPTの実行結果、各platformのAccessibility API、支援技術ごとのlegend読み上げ、互換性、歴史的変更

このページは初期Coverageです。fieldset要素の全仕様、すべてのブラウザーでの挙動、すべての支援技術での読み上げ結果の検証完了を主張するものではありません。

Related surface

初心者向けのグループ化とlegendの使い方はYugienのfieldset要素ページを参照してください。送信とform ownerはform要素、個々のcontrolとの関連付けはlabel要素、disabledなcontrolの状態はinput要素でも確認できます。