Revision 682569 of HTMLButtonElement

<p>{{ ApiRef() }}</p>
<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>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Name</th>
   <th scope="col">Type</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>accessKey</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>A single-character keyboard key to give access to the button.</td>
  </tr>
  <tr>
   <td><code>autofocus</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>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.</td>
  </tr>
  <tr>
   <td><code>disabled</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>The control is disabled, meaning that it does not accept any clicks.</td>
  </tr>
  <tr>
   <td><code>form</code> {{readonlyInline}}</td>
   <td>{{domxref("HTMLFormElement")}}</td>
   <td>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.</td>
  </tr>
  <tr>
   <td><code>formAction</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>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.</td>
  </tr>
  <tr>
   <td><code>formEncType</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>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.</td>
  </tr>
  <tr>
   <td><code>formMethod</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>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.</td>
  </tr>
  <tr>
   <td><code>formNoValidate</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>Indicates that the form is not to be validated when it is submitted. If specified, this attribute overrides the {{htmlattrxref("enctype", "form")}} attribute of the {{HTMLElement("form")}} element that owns this element.</td>
  </tr>
  <tr>
   <td><code>formTarget</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>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.</td>
  </tr>
  <tr>
   <td><code>labels</code>&nbsp;{{readonlyInline}}</td>
   <td>{{domxref("NodeList")}}</td>
   <td>A list of {{HTMLElement("label")}} elements that are labels for this button.</td>
  </tr>
  <tr>
   <td><code>menu</code>&nbsp;{{experimental_inline}}</td>
   <td>{{domxref("HTMLMenuElement")}}</td>
   <td>The menu element to be displayed if the button is clicked and is of <code>type="menu"</code>.</td>
  </tr>
  <tr>
   <td><code>name</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>The name of the object when submitted with a form. {{HTMLVersionInline(5)}} If specified, it must not be the empty string.</td>
  </tr>
  <tr>
   <td><code>tabIndex</code></td>
   <td>long</td>
   <td>Number that represents this element's position in the tabbing order.</td>
  </tr>
  <tr>
   <td><code>type</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Indicates 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>
   </td>
  </tr>
  <tr>
   <td><code>validationMessage</code>&nbsp;{{readonlyInline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>A 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.</td>
  </tr>
  <tr>
   <td><code>validity</code>&nbsp;{{readonlyInline}}</td>
   <td>{{domxref("ValidityState")}}</td>
   <td>The validity states that this button is in.</td>
  </tr>
  <tr>
   <td><code>value</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>The current form control value of the button.</td>
  </tr>
  <tr>
   <td><code>willValidate</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>Indicates whether the button is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</td>
  </tr>
 </tbody>
</table>
<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}} {{unimplemented_inline(556743)}}</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}}{{unimplemented_inline(556743)}}</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>
<h2 id="See_also">See also</h2>
<ul>
 <li>HTML element implementing this interface: {{ HTMLElement("button") }}</li>
</ul>