Web/API/HTMLButtonElement

The HTMLButtonElement interface provides properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating <button> elements.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="406" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLButtonElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Properties

Inherits properties from its parent, HTMLElement.

HTMLButtonElement.accessKey

Is a DOMString indicating the single-character keyboard key to give access to the button.

HTMLButtonElement.autofocus

Is a Boolean indicating whether or not the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.

HTMLButtonElement.disabled

Is a Boolean indicating whether or not the control is disabled, meaning that it does not accept any clicks.

HTMLButtonElement.form Read only

Is a HTMLFormElement reflecting the form that this button is associated with. If the button is a descendant of a form element, then this attribute is the ID of that form element. If the button is not a descendant of a form element, then the attribute can be the ID of any form element in the same document it is related to, or the null value if none matches.

HTMLButtonElement.formAction

Is a DOMString reflecting the URI of a resource that processes information submitted by the button. If specified, this attribute overrides the action attribute of the <form> element that owns this element.

HTMLButtonElement.formEnctype

Is a DOMString reflecting the type of content that is used to submit the form to the server. If specified, this attribute overrides the enctype attribute of the <form> element that owns this element.

HTMLButtonElement.formMethod

Is a DOMString reflecting the HTTP method that the browser uses to submit the form. If specified, this attribute overrides the method attribute of the <form> element that owns this element.

HTMLButtonElement.formNoValidate

Is a Boolean indicating that the form is not to be validated when it is submitted. If specified, this attribute overrides the novalidate attribute of the <form> element that owns this element.

HTMLButtonElement.formTarget

Is a DOMString reflecting a name or keyword indicating where to display the response that is received after submitting the form. If specified, this attribute overrides the target attribute of the <form> element that owns this element.

HTMLButtonElement.labels Read only

Is a NodeList that represents a list of <label> elements that are labels for this button.

HTMLButtonElement.menu '

Is a HTMLMenuElement representing the menu element to be displayed if the button is clicked and is of type="menu".

HTMLButtonElement.name

Is a DOMString representing the name of the object when submitted with a form. HTML5 If specified, it must not be the empty string.

HTMLButtonElement.tabIndex

Is a long that represents this element's position in the tabbing order.

HTMLButtonElement.type

Is a DOMString indicating the behavior of the button. This is an enumerated attribute with the following possible values:

submit

• The button submits the form. This is the default value if the attribute is not specified, HTML5 or if it is dynamically changed to an empty or invalid value.
• reset: The button resets the form.
• button: The button does nothing.
• menu: The button displays a menu. '

HTMLButtonElement.willValidate Read only

Is a Boolean indicating whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including: its type property is reset or button; it has a <datalist> ancestor; or the disabled property is set to true.

HTMLButtonElement.validationMessage Read only

Is a DOMString representing the localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints.

HTMLButtonElement.validity Read only

Is a ValidityState representing the validity states that this button is in.

HTMLButtonElement.value

Is a DOMString representing the current form control value of the button.

Methods

Inherits methods from its parent, HTMLElement

Name	Return Type	Description
checkValidity()	Boolean	Not supported for reset or button elements.
reportValidity()	Boolean	Not supported for reset or button elements.
setCustomValidity(in DOMString error)	void	Not supported for reset or button elements.

With Gecko-based browser, use the :-moz-submit-invalid pseudo-class to style submit buttons based on the validation of a form.

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'HTMLButtonElement' in that specification.	Living Standard
HTML 5.2The definition of 'HTMLButtonElement' in that specification.	Recommendation	The menu attribute and type="menu" value have been removed.
HTML 5.1The definition of 'HTMLButtonElement' in that specification.	Recommendation	The following attribute has been added: menu. The type attribute can take one more value, "menu".
HTML5The definition of 'HTMLButtonElement' in that specification.	Recommendation	The attributes tabindex and accesskey, are now defined on HTMLElement. The following attributes have been added: autofocus, formAction, formEnctype, formMethod, formNoValidate, formTarget, labels, validity, validationMessage, and willValidate. The following methods have been added: checkValidity(), setCustomValidity(). The type attribute is no more read-only.
Document Object Model (DOM) Level 2 HTML SpecificationThe definition of 'HTMLButtonElement' in that specification.	Obsolete	No change from Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 SpecificationThe definition of 'HTMLButtonElement' in that specification.	Obsolete	Initial definition.

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
HTMLButtonElement	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
accessKey	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
autofocus	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
disabled	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
form	Chrome Full support Yes	Edge Full support 16	Firefox Full support 4	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
formAction	Chrome Full support Yes	Edge Full support 12	Firefox Full support 4 Notes' Full support 4 Notes' Notes' 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).	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4 Notes' Full support 4 Notes' Notes' 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).	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
formEnctype	Chrome Full support Yes	Edge Full support 12	Firefox Full support 4	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
formMethod	Chrome Full support Yes	Edge Full support 12	Firefox Full support 4	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
formNoValidate	Chrome Full support Yes	Edge Full support 12	Firefox Full support 4	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
formTarget	Chrome Full support Yes	Edge Full support 12	Firefox Full support 4	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
labels	Chrome Full support Yes	Edge Full support 18	Firefox Full support 56	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 56	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
menu Experimental'	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
name	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
reportValidity	Chrome Full support 40	Edge Full support 17	Firefox Full support 49	IE No support No	Opera Full support 27	Safari Full support 10	WebView Android Full support 40	Chrome Android Full support 40	Firefox Android Full support 64	Opera Android Full support 27	Safari iOS Full support 10	Samsung Internet Android Full support 4.0
tabIndex	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
type	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
validationMessage	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
validity	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
value	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
willValidate	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support  

Full support

No support  

No support

Experimental. Expect behavior to change in the future.'

Experimental. Expect behavior to change in the future.

See implementation notes.'

See implementation notes.

See also

• HTML element implementing this interface: <button>

HTMLButtonElement by Mozilla Contributors is licensed under CC-BY-SA 2.5.