<form>要素

Technical Summary

Definition / Categories

フォームの入れ子は適合する文書の構造ではありません。DOM操作やHTML parserの処理が関与する場合は、ソース上の構造と、実際に構築されたDOM・form ownerを別々に確認します。

Content attributes

Form owner / Association

フォームコントロールなどのform-associated elementには、関係付けられたform要素であるform ownerがあります。既定では最も近いform祖先に関連付けられます。

listed form-associated elementにはform属性を指定して、同じtree内にある特定のform要素へ明示的に関連付けられます。これはフォームの入れ子を作る機能ではなく、コントロールの配置と所有関係を分けるための仕組みです。

<form id="preferences" action="/save" method="post">
  <button type="submit">保存</button>
</form>

<input form="preferences" name="theme" value="dark">

この例では、inputがformの子孫でなくても、form="preferences"によってform ownerを指定できます。IDの一致、同じtree、listed要素であることなどの条件を別途確認します。

Form submission attributes

送信属性はform要素だけでなく、submit button側にも指定できます。submitter側のformaction、formmethod、formenctype、formnovalidate、formtargetは、送信経路ごとの上書き条件になります。

<form action="/search" method="get">
  <input name="q" type="search">
  <button type="submit">通常検索</button>
  <button type="submit" formaction="/export" formmethod="post">書き出す</button>
</form>

ひとつのフォームに複数の送信経路を置く場合は、form属性とsubmitter属性のどちらが採用されるかを確認します。

Submission model

user activation / requestSubmit()
  ↓
interactive constraint validation
  ↓
submit event（キャンセル可能）
  ↓
entry listの構成
  ↓
enctypeに従うencoding
  ↓
actionとmethodに従う送信・ナビゲーション

これは説明用の流れです。実際のsubmission algorithmでは、sandbox、navigation、イベント、submitter、entry list、encodingなどの条件分岐が入ります。

form.submit()はinteractive constraint validationを行わず、submitイベントも発火しません。一方、form.requestSubmit()は通常の送信に近く、constraint validationとsubmitイベントを含みます。submitterを渡すと、そのボタンの送信属性と値も処理対象になります。

Entry list / Submittable controls

「画面に表示されている」ことと「entry listに含まれる」ことは同じではありません。コントロールの種類、form owner、name、disabled、checkedness、submitterなどを合わせて評価します。

Constraint validation

フォーム送信時には、対象となるform controlの制約検証が関係します。required、型、範囲、長さ、pattern、custom validityなど、各コントロールの条件を評価します。

• novalidateまたはsubmitterのformnovalidateは、送信時の検証を抑制します。
• disabledなコントロールはconstraint validationから除外されます。
• checkValidity()は制約を静的に確認し、reportValidity()は利用者向けの通知を伴う確認を行います。
• クライアント側検証はUXのための機能であり、セキュリティ機構ではありません。サーバー側でも検証が必要です。

DOM interface

form要素はHTMLFormElement interfaceとして公開されます。フォームの属性、elements collection、length、reset、validation、submissionに関係するAPIを持ちます。

const form = document.querySelector('form');
form.elements;
form.checkValidity();
form.reportValidity();
form.reset();
form.requestSubmit();

APIの結果は、フォームの属性だけでなく、form owner、コントロールの状態、submitter、イベントリスナー、navigation可能性などにも依存します。

Fact / Evidence（主張 / 根拠）

主要Factを、適用条件・確認状態・仕様上の根拠位置と対応付けています。未完了の範囲は下のCoverage / Open Issuesに残しています。

Evidence

1. HTML Standard: The form element — category、content model、content attributes、HTMLFormElement interface
2. HTML Standard: Categories — form-associated、listed、submittable、resettable elementsの分類
3. HTML Standard: Association of controls and forms — form ownerと明示的関連付け
4. HTML Standard: Constraints — constraint validation、validation API、security boundary
5. HTML Standard: Form submission — submission algorithm、entry list、encoding、submitter
6. HTML Accessibility API Mappings: form — platform accessibility mappingの確認入口

Implementation Evidence

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

共通fixture / 記録: <form id="evidence-form" method="get">内に、type省略のinput、for/idによる明示関連、label内inputの暗黙関連、required、disabled、submitとtype省略のbuttonを配置しました。環境: Chrome 152.0.0.0（Windows NT 10.0） / 確認日 2026-09-12。

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

Coverage / Open Issues

• 確認済みcategory、content model、主なcontent attributes、form owner、送信属性、entry listの主要条件、HTMLFormElementの概要
• 確認済みsubmit()とrequestSubmit()のvalidation・submit event境界
• 未完了entry list構成アルゴリズムの全分岐、formdata event、各encoding、特殊なsubmitter条件の完全な追跡
• 未完了複数ブラウザーの実装差、WPTの正確な対応表、HTML-AAMと支援技術の観測
• 未完了歴史的変更、サーバー側処理、互換性、Expert-gap Review

このページは初期Coverageです。ここで確認した範囲が、form要素に関する全事実の検証完了や、すべての実装で同一結果になることを意味しません。

Related surface

フォームを初めて作るときの最小例、actionとmethod、label、入力チェックはYugienのform要素ページで説明しています。method="dialog"とdialogの結果はdialog要素、計算結果の表示と送信されないoutputはoutput要素、labelable要素との関連付けはlabel要素、複数行入力の値と検証はtextarea要素、コントロール側の状態はinput要素とbutton要素も参照してください。