HTML <button> Element

The <button> element creates an interactive control that users can activate to perform an action. Buttons are commonly used to submit forms, reset form controls, open dialogs, control popovers, or trigger actions defined by a web application.

Syntax

<button type="button">Button Text</button>

The opening and closing tags are both required. Unlike an <input> button, a <button> can contain text and other permitted phrasing content.

Attributes

The <button> element supports the global HTML attributes and several element-specific attributes:

Attribute	Description
`command`	Specifies the action the button performs on the element identified by `commandfor`.
`commandfor`	Identifies the element controlled by the button when using a command.
`disabled`	Prevents the button from being activated.
`form`	Associates the button with a `<form>` element, even when the button is not inside that form.
`formaction`	Specifies the URL used to submit the form when this button is used for submission.
`formenctype`	Specifies how submitted form data is encoded when this button submits the form.
`formmethod`	Specifies the HTTP method used when this button submits the form.
`formnovalidate`	Specifies that form validation should be skipped when this button submits the form.
`formtarget`	Specifies where the response from the form submission should be displayed.
`name`	Provides a name for the button when its value is submitted with form data.
`popovertarget`	Identifies a popover element that the button controls.
`popovertargetaction`	Specifies whether the targeted popover should be shown, hidden, or toggled.
`type`	Specifies the button's behavior. Common values are `submit`, `reset`, and `button`.
`value`	Specifies the value associated with the button when it is submitted with form data.

Button Types

The type attribute determines the button's default behavior:

Value	Description
`submit`	Submits the associated form. This is the default for a button associated with a form when `type` is omitted or invalid.
`reset`	Resets the controls in the associated form to their initial values.
`button`	Provides no default action. It can be used for a custom action or as a control for features such as dialogs and popovers.

Example

The following example creates a simple form with a submit button and a reset button:

<form action="/contact.html" method="get">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

The Submit button submits the form, while the Reset button restores the form controls to their initial values.

Try It Yourself

Enter a name and use the Reset button to see how a <button type="reset"> control restores the form field to its original value.

Play in Editor

Usage Notes

Always consider specifying the type attribute. A <button> associated with a form behaves as a submit button by default, so type="button" should be used when the button is intended for another action.

Unlike <input type="button">, the <button> element can contain HTML content as part of its label. This makes it useful when a button needs text combined with an icon or other phrasing content.

The form-related attributes such as formaction, formenctype, formmethod, formnovalidate, and formtarget can override corresponding settings on the associated form for a particular submit button.

Modern HTML also allows buttons to control popovers and other elements declaratively through attributes such as popovertarget, command, and commandfor. Browser support for these newer features should be checked separately.

Accessibility

Give every button an accessible name that clearly describes its purpose. Visible text such as Submit Order or Close is usually clearer than a button containing only an unfamiliar icon.

Do not remove the visible keyboard focus indicator unless it is replaced with another clearly visible focus style. Users who navigate with a keyboard need to be able to identify which button currently has focus.

Use a <button> for actions and an <a> element for navigation to another page or location. Choosing the appropriate element provides users and assistive technologies with the expected behavior.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The <button> element itself is widely supported, but newer features such as command, commandfor, and popover controls have different browser support histories.

<form> - Groups controls used to collect and submit information.

<input> - Creates several types of form controls, including input-based buttons.

<dialog> - Represents a dialog that can be controlled by buttons.

Specifications

HTML Living Standard: The <button> Element

HTML <button> Element