Purpose and content model
Button represents an action users can activate with a pointer, keyboard, or other input method. A submit button submits its associated form; a regular button performs an action supplied by application code; a reset button restores form controls to their initial values. Specify type explicitly to avoid accidental submissions when a component moves inside a form.
Button content is phrasing content and should provide a meaningful accessible name. It can contain an icon and text, but not another interactive control. A button is not a substitute for a link whose purpose is navigation to another resource.
Syntax and working example
<form action="/drafts/" method="post">
<label for="title">Draft title</label><input id="title" name="title">
<button type="submit" name="intent" value="save">Save draft</button>
<button type="submit" name="intent" value="preview" formaction="/preview/">Preview draft</button>
</form>Supported attributes and behavior
Type, name, value, disabled, and form control basic behavior and submission. A submit button can override its form with formaction, formenctype, formmethod, formnovalidate, and formtarget. Name/value from the actual submitter can distinguish several submission actions. Popovertarget and popovertargetaction control a related popover. Newer command and commandfor behavior can invoke supported declarative actions, but support must be tested rather than assumed from the element's broad availability.
Another practical pattern
<button type="button" popovertarget="help">Show upload help</button>
<div id="help" popover>Choose a clear image smaller than the stated upload limit.</div>Accessibility and browser notes
Prefer visible text labels. An icon-only button needs an accessible name and enough context to make its action clear. Disabled buttons are normally removed from keyboard navigation and cannot explain their own disabled state; provide nearby instructions when users need to know how to enable the action.
Common mistakes
Do not add click behavior to a div and then recreate button semantics incompletely. Avoid reset buttons next to primary submit buttons when accidental activation would lose work. A button's disabled attribute is not server authorization and can be removed by the client.
Verify your implementation
Activate the control with both Enter and Space and verify that exactly one intended action occurs. Move the component inside a form during testing to catch missing type declarations. Inspect which submitter name/value reaches the server and how a failed action is announced.
Standard status and sources
Standard; browser availability must be checked independently of specification status.