<button>要素

Technical Summary

Definition / Categories

項目	仕様上の整理	確認点
意味	子孫の内容をlabelとするbutton	テキスト・画像・その他のphrasing contentで目的を伝える
Category	flow、phrasing、interactive、palpable	フォーム関連のcategoryは下記のform-associated列で確認する
Form-associated	listed、labelable、submittable、autocapitalize-and-autocorrect inheriting	form owner、送信対象、labelとの関係を分けて扱う
Interface	HTMLButtonElement	type、form、validity、labelsなどのIDL APIを持つ

Structure / Content model

通常のbuttonのcontent modelはphrasing contentですが、interactive contentの子孫や、tabindex属性を指定した子孫を含められません。ボタンの中に別のボタンやリンクを入れる構造は、意味上の重複した操作対象を作ります。

<!-- 子孫に別の操作対象を入れない -->
<button type="button">
  <span>メニューを開く</span>
</button>

現在のHTML Standardには、selectの最初の子として使われるbuttonとselectedcontentに関する特別な規則もあります。通常のページ上のbuttonと同じ前提で一括りにしないことが重要です。

type状態とsubmit button判定

Keyword	State	主な処理
submit	Submit Button	form ownerのform submissionを開始する
reset	Reset Button	form ownerをresetする
button	Button	通常のform submit/resetを選ばず、ページ上の操作に使う
省略・無効値	Auto	command / commandfor、親がselectかどうか、submit条件と合わせて判定する

仕様上のsubmit button判定は、単純な「typeがないなら常にsubmit」という説明では不十分です。Auto状態でcommandとcommandforがなく、親がselectでない場合など、条件を合わせて確認します。

Activation behavior

buttonのactivation behaviorは、まずdisabled状態とdocumentのactive状態を確認します。form ownerがある場合、submit buttonならformをsubmitし、Reset Buttonならformをresetします。Auto状態で処理が残る場合は、commandforの対象とcommandに関する処理へ進みます。

if button is disabled:
    return
if button has a form owner:
    if button is a submit button:
        submit the form
        return
    if button is in the Reset Button state:
        reset the form
        return
process commandfor / command or popover targeting

このモデルでは、すべてのbuttonを「クリックイベントにJavaScriptを付けるだけの要素」として扱いません。フォーム、disabled、command、popoverなどがactivationの分岐になります。

Form association / Submission

form属性はbuttonとform ownerを明示的に関連付けます。nameはフォーム送信とform.elements APIで使う名前を表し、valueは送信時の値を表します。ただし、buttonとそのvalueは、そのbutton自身が送信を開始した場合にだけform submissionへ含まれます。

属性	適用範囲	境界
form	form ownerの明示的な関連付け	buttonをformの外に置く構造と関係する
formaction / formmethod	送信先URL・methodの上書き	submit buttonでない場合は指定しない
formnovalidate	そのsubmit操作でconstraint validationを回避	フォーム全体の検証仕様とは別に扱う
disabled	コントロールを非対話化し、valueの送信を防ぐ	見た目の無効化だけでなくactivationと送信に影響する

Commands / Popover boundary

button要素はcommandを定義できます。commandforで同じtree内の対象要素を指定し、commandでpopoverの表示・非表示やdialogのcloseなど、仕様で定義された操作を選べます。--で始まるcustom commandは、対象要素へcommand eventを配送するための拡張点です。

<button type="button"
        commandfor="help-popover"
        command="show-popover">
  ヘルプを表示
</button>
<div id="help-popover" popover>ヘルプ本文</div>

この領域はbutton単体の説明だけで完結せず、popover、dialog、CommandEvent、target側のcommand stepsとのCross-Spec関係を含みます。

DOM Interface

button要素はHTMLButtonElementとして公開されます。type、disabled、form、name、valueに加え、willValidate、validity、validationMessage、checkValidity()、reportValidity()、setCustomValidity()、labelsなどが関係します。

const button = document.querySelector('button');
button.type;
button.form;
button.disabled;
button.labels;
button.checkValidity();

Fact / Evidence（主張 / 根拠）

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

Evidence

1. HTML Standard: The button element — categories、content model、type、form attributes、activation behavior、DOM interface
2. HTML Standard: Using the button element to define a command — commandのlabel、disabled state、action
3. HTML Standard: Implicit submission — formのdefault buttonと暗黙送信
4. HTML Standard: Form submission algorithm — submitterとform submissionの処理境界

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を参照します。

Coverage / Open Issues

• 確認済みbuttonの意味、category、content model、type状態、基本的なactivation、form association、主要DOM API
• 確認済みcommand / commandforとpopover・dialogに関する仕様上の入口
• 未完了form submission algorithm全体、successful controls、entry list、implicit submissionの全分岐
• 未完了HTML-AAM、platform accessibility mapping、支援技術ごとの観測
• 未完了ブラウザー別実装結果、WPT、歴史的変更、互換性データ、Expert-gap Review

このページは初期Coverageです。確認済みの範囲を示すものであり、button要素全体の検証完了や、すべての実装差の解消を主張しません。

Related surface

初心者向けのtypeの選び方、フォーム例、リンクとの使い分けはYugienのbutton要素ページを参照してください。dialogを開閉するbuttonとの関係はAtlasのdialog要素、リンクの条件とactivation behaviorはAtlasのa要素、フォームコントロールのtype状態はAtlasのinput要素で確認できます。