Revision 1115687 of HTMLButtonElement

<div>{{APIRef("HTML DOM")}}</div>

<p>The <strong><code>HTMLButtonElement</code></strong> interface provides properties and methods (beyond the {{HTMLElement("button")}} object interface it also has available to them by inheritance) for manipulating the layout and presentation of button elements.</p>

<h2 id="Properties">Properties</h2>

<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>

<dl>
 <dt>{{domxref("HTMLButtonElement.accessKey")}}</dt>
 <dd>Is a {{domxref("DOMString")}} indicating the single-character keyboard key to give access to the button.</dd>
 <dt>{{domxref("HTMLButtonElement.autofocus")}}</dt>
 <dd>Is a {{domxref("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.</dd>
 <dt>{{domxref("HTMLButtonElement.disabled")}}</dt>
 <dd>Is a {{domxref("Boolean")}} indicating whether or not the control is disabled, meaning that it does not accept any clicks.</dd>
 <dt>{{domxref("HTMLButtonElement.form")}} {{readonlyInline}}</dt>
 <dd>Is a {{domxref("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.<br />
    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 <code>null</code> value if none matches.</dd>
 <dt>{{domxref("HTMLButtonElement.formAction")}}</dt>
 <dd>Is a {{domxref("DOMString")}} reflecting the URI of a resource that processes information submitted by the button. If specified, this attribute overrides the {{htmlattrxref("action", "form")}} attribute of the {{HTMLElement("form")}} element that owns this element.</dd>
 <dt>{{domxref("HTMLButtonElement.formEncType")}}</dt>
 <dd>Is a {{domxref("DOMString")}} reflecting the type of content that is used to submit the form to the server. If specified, this attribute overrides the {{htmlattrxref("enctype", "form")}} attribute of the {{HTMLElement("form")}} element that owns this element.</dd>
 <dt>{{domxref("HTMLButtonElement.formMethod")}}</dt>
 <dd>Is a {{domxref("DOMString")}} reflecting the HTTP method that the browser uses to submit the form. If specified, this attribute overrides the {{htmlattrxref("method", "form")}} attribute of the {{HTMLElement("form")}} element that owns this element.</dd>
 <dt>{{domxref("HTMLButtonElement.formNoValidate")}}</dt>
 <dd>Is a {{domxref("Boolean")}} indicating that the form is not to be validated when it is submitted. If specified, this attribute overrides the {{htmlattrxref("novalidate", "form")}} attribute of the {{HTMLElement("form")}} element that owns this element.</dd>
 <dt>{{domxref("HTMLButtonElement.formTarget")}}</dt>
 <dd>Is a {{domxref("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 {{htmlattrxref("target", "form")}} attribute of the {{HTMLElement("form")}} element that owns this element.</dd>
 <dt>{{domxref("HTMLButtonElement.labels")}} {{readonlyInline}}</dt>
 <dd>Is a {{domxref("NodeList")}} that represents a list of {{HTMLElement("label")}} elements that are labels for this button.</dd>
 <dt>{{domxref("HTMLButtonElement.menu")}} {{experimental_inline}}</dt>
 <dd>Is a {{domxref("HTMLMenuElement")}} representing the menu element to be displayed if the button is clicked and is of <code>type="menu"</code>.</dd>
 <dt>{{domxref("HTMLButtonElement.name")}}</dt>
 <dd>Is a {{domxref("DOMString")}} representing the name of the object when submitted with a form. {{HTMLVersionInline(5)}} If specified, it must not be the empty string.</dd>
 <dt>{{domxref("HTMLButtonElement.tabIndex")}}</dt>
 <dd>Is a <code>long</code> that represents this element's position in the tabbing order.</dd>
 <dt>{{domxref("HTMLButtonElement.type")}}</dt>
 <dd>Is a {{domxref("DOMString")}} indicating the behavior of the button. This is an enumerated attribute with the following possible values:
  <ul>
   <li><code>"submit"</code>: The button submits the form. This is the default value if the attribute is not specified, {{HTMLVersionInline(5)}} or if it is dynamically changed to an empty or invalid value.</li>
   <li><code>"reset"</code>: The button resets the form.</li>
   <li><code>"button"</code>: The button does nothing.</li>
   <li><code>"menu"</code>: The button displays a menu. {{experimental_inline}}</li>
  </ul>
 </dd>
 <dt>{{domxref("HTMLButtonElement.validationMessage")}} {{readonlyInline}}</dt>
 <dd>Is a {{domxref("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 (<code>willValidate</code> is <code>false</code>), or it satisfies its constraints.</dd>
 <dt>{{domxref("HTMLButtonElement.validity")}} {{readonlyInline}}</dt>
 <dd>Is a {{domxref("ValidityState")}} representing the validity states that this button is in.</dd>
 <dt>{{domxref("HTMLButtonElement.value")}}</dt>
 <dd>Is a {{domxref("DOMString")}} representing the current form control value of the button.</dd>

 <dt>{{domxref("HTMLButtonElement.willValidate")}}</dt>
 <dd>Is a {{domxref("Boolean")}} indicating whether the button is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Name</th>
   <th scope="col">Return Type</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>checkValidity()</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>Not supported for button elements.</td>
  </tr>
  <tr>
   <td><code>setCustomValidity(in DOMString error)</code></td>
   <td><code>void</code></td>
   <td>Not supported for button elements.</td>
  </tr>
 </tbody>
</table>

<p>WIth Gecko-based browser, use the {{cssxref(":-moz-submit-invalid")}} pseudo-class to style submit buttons based on the validation of a form.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>The following attribute has been added: <code>menu</code>.<br />
    The <code>type</code> attribute can take one more value, <code>"menu"</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>The attributes <code>tabindex</code> and <code>accesskey</code>, are now defined on {{domxref("HTMLElement")}}.<br />
    The following attributes have been added: <code>autofocus</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>labels</code>, <code>validity</code>, <code>validationMessage</code>, and <code>willValidate</code>.<br />
    The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>.<br />
    The <code>type</code> attribute is no more read-only.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-48250443', 'HTMLAnchorElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>No change from {{SpecName("DOM1")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Form-related attributes</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(2.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>labels</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>menu</code> &amp; <code>type="menu"</code>&nbsp;{{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Form-related attributes</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(2.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>labels</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>menu</code> &amp; <code>type="menu"</code>&nbsp;{{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] This feature is not implemented yet. See {{bug("556743")}}.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>HTML element implementing this interface: {{HTMLElement("button")}}</li>
</ul>