<button>
The <button> element represents an interactive control that triggers an action. It supports keyboard interaction, disabled state, form submission behavior, and accessible naming by default.
Overview
The <button> element represents an interactive control that triggers an action. It supports keyboard interaction, disabled state, form submission behavior, and accessible naming by default.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML attribute | ||||||
| The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| The form HTML attribute associates a form-associated element with a form element within the same document. This attribute applies to the button, fieldset, input, object, output, select, and textarea elements. | 9 | 16 | 4 | 5.1 | 18 | 5 |
formaction | 9 | 12 | 4 | 5.1 | 18 | 5 |
formenctype | 9 | 12 | 4 | 5.1 | 18 | 5 |
formmethod | 9 | 12 | 4 | 5.1 | 18 | 5 |
formnovalidate | 9 | 12 | 4 | 5.1 | 18 | 5 |
formtarget | 9 | 12 | 4 | 5.1 | 18 | 5 |
name | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
type | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
value | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| DOM API | ||||||
| The HTMLButtonElement interface provides properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating button elements. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLButtonElement.disabled property indicates whether the control is disabled, meaning that it does not accept any clicks. | 1 | 12 | 1 | 3 | 18 | 1 |
| The form read-only property of the HTMLButtonElement interface returns an HTMLFormElement object that owns this button, or null if this button is not owned by any form. | 1 | 12 | 1 | 3 | 18 | 1 |
| The formAction property of the HTMLButtonElement interface is the URL of the program that is executed on the server when the form that owns this control is submitted. It reflects the value of the 's formaction attribute. | 9 | 12 | 4 | 5.1 | 18 | 5 |
| The formEnctype property of the HTMLButtonElement interface is the MIME_type of the content sent to the server when the form is submitted. It reflects the value of the 's formenctype attribute. | 9 | 12 | 4 | 5.1 | 18 | 5 |
| The formMethod property of the HTMLButtonElement interface is the HTTP method used to submit the form if the button element is the control that submits the form. It reflects the value of the 's formmethod attribute. | 9 | 12 | 4 | 5.1 | 18 | 5 |
| The formNoValidate property of the HTMLButtonElement interface is a boolean value indicating if the form will bypass constraint validation when submitted via the button. It reflects the element's formnovalidate attribute. | 4 | 12 | 4 | 5 | 18 | 4 |
| The formTarget property of the HTMLButtonElement interface is the tab, window, or iframe where the response of the submitted form is to be displayed. It reflects the value of the button element's formtarget attribute. | 9 | 12 | 4 | 5.1 | 18 | 5 |
| The HTMLButtonElement.labels read-only property returns a NodeList of the label elements associated with the button element. | 6 | 18 | 56 | 5.1 | 18 | 5 |
| The name property of the HTMLButtonElement interface indicates the name of the button element or the empty string if the element has no name. It reflects the element's name attribute. | 1 | 12 | 1 | 3 | 18 | 1 |
| The type property of the HTMLButtonElement interface is a string that indicates the behavior type of the button element. | 1 | 12 | 1 | 3 | 18 | 1 |
| The value property of the HTMLButtonElement interface represents the value of the button element as a string, or the empty string if no value is set. It reflects the element's value attribute. | 1 | 12 | 1 | 3 | 18 | 1 |
- In Firefox 56, the implementation has been updated so that the `formAction` property returns the correct form submission URL, as per spec, when the associated button is being used to submit a form (bug 1366361).
Syntax
<button type="button">Standard button</button>
<button type="submit">Send</button>
<button type="reset">Reset</button>
<button disabled>Invalid button</button>Live demo
button. type
Type attribute in submit / reset / button specified.usage to compare usage.
Use cases
UI actions
Use buttons for opening dialogs, toggling panels, saving changes, and other command-oriented interactions.
Form submission
Submit or reset forms with built-in semantics and control over type, disabled state, and labels.
Cautions
- Default button type inside forms is submit, so set type explicitly when the button should not submit the form.
- Do not replace button with styled non-semantic containers unless you also recreate all missing behavior and accessibility work.
Accessibility
- Buttons need clear labels that describe the action, not just the visual appearance of the control.
Related links
Powered by web-features