HTML <button> element

The <button> element represents a button labelled by its contents. It provides a control for an action, such as submitting a form, opening a dialog, or changing a setting. For navigation to another page or location, an <a href="..."> link is usually appropriate.

The type attribute determines its form behaviour. The value submit submits the associated form, reset restores its controls to their initial values, and button has no form action. An ordinary button associated with a form acts as a submit button when type is omitted. Specify type="button" for other actions so the intention is clear.

A <button> takes its caption from the content between its tags. An <input type="button"> is an empty element whose value supplies the caption. Both provide native button interaction, but <button> can also contain text with spans, an image, or an SVG icon. These can be styled separately or updated to show progress. Do not put another interactive control, a link, or an element with tabindex inside the button. An icon-only button still needs an accessible name, for example through aria-label.

There is another useful difference when submitting forms. In <button type="submit" name="action" value="save">Save your changes</button>, the caption is separate from the submitted value. When that button submits its form, its contribution is action=save. The caption can change or be translated without changing the value. With <input type="submit">, value supplies both the caption and the submitted value. An input of type button does not submit the form or contribute its own name and value.

A button normally belongs to its enclosing form, but form="formId" can associate it with a form elsewhere in the document. On a submit button, formaction, formmethod, formenctype, formtarget, and formnovalidate can override the corresponding submission settings. These overrides are also available on <input type="submit">. The disabled attribute prevents button activation and excludes it from submission.

Buttons can run JavaScript, and HTML also provides built-in actions. Both <button type="button"> and <input type="button"> can use popovertarget to control a popover. The newer command and commandfor attributes belong to <button> and can invoke actions such as opening a modal dialog in supporting browsers. They do not apply to input buttons.

For a new interface, <button> offers more room to adapt the content and behaviour. An input button remains suitable for a simple text caption. In the example below, both controls toggle the same help popover without JavaScript; browser support for popovers is required.

Attributes: type, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, value, popovertarget, popovertargetaction, command, commandfor, GLOBALS.

Typical layout:
<p>
  <button type="button" popovertarget="button-help">Show help</button>
  <input type="button" value="Show help" popovertarget="button-help">
</p>
<div id="button-help" popover>
  <p>Both buttons open this help message.</p>
  <button type="button" popovertarget="button-help"
          popovertargetaction="hide">Close</button>
</div>

Visual representation: