The <button> Element

Technical Summary

Definition / Categories

Item	Specification view	Inspection point
Meaning	A button labeled by its descendant content	Use text, images, or other phrasing content to communicate the purpose
Categories	Flow, phrasing, interactive, and palpable content	Keep content categories separate from form-associated categories
Form association	Listed, labelable, submittable, and autocapitalize-and-autocorrect inheriting form-associated element	Inspect form owner, submission participation, and labeling independently
Interface	HTMLButtonElement	Exposes type, form, validity, labels, and related APIs

Structure / Content model

The normal button content model is phrasing content, but it must not contain interactive-content descendants or descendants with a specified tabindex. Nesting another button or link inside a button creates overlapping interaction targets.

<!-- Do not put another interaction target inside -->
<button type="button">
  <span>Open the menu</span>
</button>

The current HTML Standard also defines a special branch for a button used as the first child of a select, including selectedcontent. That branch should not be silently treated as the ordinary page-level button model.

type states and submit-button determination

Keyword	State	Main processing
submit	Submit Button	Starts form submission from the form owner
reset	Reset Button	Resets the form owner
button	Button	Does not select ordinary form submission or reset; used for page actions
Missing or invalid	Auto	Determined together with command/commandfor, the parent element, and submit-button conditions

The specification cannot be summarized accurately as “a missing type always submits”. The Auto state is a condition in the submit-button definition: among other conditions, the command attributes must be absent and the parent must not be a select.

Activation behavior

Button activation first checks the disabled state and whether the document is fully active. When a form owner exists, a submit button submits the form and a Reset Button resets it. If the Auto-state branch remains, processing continues through the commandfor target and command state.

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

This model is broader than “attach JavaScript to a click”. Forms, disabled controls, commands, and popovers can all affect the activation branch.

Form association / Submission

The form attribute explicitly associates a button with its form owner. name is used for form submission and the form.elements API; value supplies the value used in submission. The button and its value are included only when that button initiated the form submission.

Attribute	Scope	Boundary
form	Explicit form-owner association	Allows the button to be placed outside the form element
formaction / formmethod	Overrides the submission URL or method	Must not be used when the element is not a submit button
formnovalidate	Bypasses constraint validation for that submit operation	Separate from the general form validation model
disabled	Makes the control non-interactive and prevents its value from being submitted	Affects both activation and submission, not only appearance

Commands / Popover boundary

A button element can define a command. commandfor identifies a target in the same tree, while command selects a defined action such as showing or hiding a popover or closing a dialog. A custom command beginning with -- is an extension point that dispatches a command event to the target.

<button type="button"
        commandfor="help-popover"
        command="show-popover">
  Show help
</button>
<div id="help-popover" popover>Help text</div>

This is not isolated to the button element: it crosses into popover, dialog, CommandEvent, and target-side command-step definitions.

DOM Interface

The button element is exposed as HTMLButtonElement. Alongside type, disabled, form, name, and value, the interface includes willValidate, validity, validationMessage, checkValidity(), reportValidity(), setCustomValidity(), and labels.

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

Fact / Evidence

Key facts are mapped to their conditions, review status, and evidence locations. Unresolved scope remains visible in the Coverage section below.

Evidence

1. HTML Standard: The button element — categories, content model, type, form attributes, activation behavior, and the DOM interface
2. HTML Standard: Using the button element to define a command — command label, disabled state, and action
3. HTML Standard: Implicit submission — the form default button and implicit submission
4. HTML Standard: Form submission algorithm — submitter and form-submission processing boundaries

Implementation Evidence

Implementation observations are recorded separately from normative claims. Unrun items are not treated as reviewed.

Shared fixture / record: Inside <form id="evidence-form" method="get">, the fixture includes an input with no type, explicit for/id association, implicit association with an input inside a label, required, disabled, and submit plus type-omitted button controls. Environment: Chrome 152.0.0.0 (Windows NT 10.0) / checked 2026-09-12.

Use the WPT repository for test mapping and HTML-AAM for accessibility criteria.

Coverage / Open Issues

• CheckedElement meaning, categories, content model, type states, basic activation, form association, and the main DOM API
• CheckedSpecification entry points for command / commandfor and popover/dialog behavior
• OpenThe complete form-submission algorithm, successful controls, entry lists, and all implicit-submission branches
• OpenHTML-AAM, platform accessibility mappings, and assistive-technology observations
• OpenBrowser implementation results, WPT, historical changes, compatibility data, and Expert-gap Review

This page is initial coverage. It does not claim that every fact about the button element has been verified or that all implementation differences have been resolved.

Related surface

For a beginner-friendly explanation of type selection, form examples, and the boundary with links, see the button element page in Yugien. The relationship between buttons and opening or closing a dialog is covered by the dialog element in Atlas; link conditions and activation behavior are covered by the a element in Atlas; form-control type states are covered by the input element in Atlas.