HTMLButtonElement

  • Revision slug: DOM/HTMLButtonElement
  • Revision title: HTMLButtonElement
  • Revision id: 389799
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{DomRef}}

The HTMLButtonElement 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.

Attributes

Inherits attributes from its parent, {{domxref("HTMLElement")}}.

Name Type Description
accessKey {{domxref("DOMString")}} A single-character keyboard key to give access to the button.
autofocus {{domxref("Boolean")}} 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.
disabled {{domxref("Boolean")}} The control is disabled, meaning that it does not accept any clicks.
form {{readonlyInline}} {{domxref("HTMLFormElement")}} 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.
formAction {{domxref("DOMString")}} 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.
formEncType {{domxref("DOMString")}} 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.
formMethod {{domxref("DOMString")}} 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.
formNoValidate {{domxref("Boolean")}} 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.
formTarget {{domxref("DOMString")}} 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.
labels {{readonlyInline}} {{domxref("NodeList")}} A list of {{HTMLElement("label")}} elements that are labels for this button.
menu {{experimental_inline}} {{domxref("HTMLMenuElement")}} The menu element to be displayed if the button is clicked and is of type="menu".
name {{domxref("DOMString")}} The name of the object when submitted with a form. {{HTMLVersionInline(5)}} If specified, it must not be the empty string.
tabIndex long Number that represents this element's position in the tabbing order.
type {{domxref("DOMString")}} Indicates 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, {{HTMLVersionInline(5)}} 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. {{experimental_inline}}
validationMessage {{readonlyInline}} {{domxref("DOMString")}} 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 (willValidate is false), or it satisfies its constraints.
validity {{readonlyInline}} {{domxref("ValidityState")}} The validity states that this button is in.
value {{domxref("DOMString")}} The current form control value of the button.
willValidate {{domxref("Boolean")}} Indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.

Methods

Inherits methods from its parent, {{domxref("HTMLElement")}}.

Name Return Type Description
checkValidity() {{domxref("Boolean")}} Not supported for button elements.
setCustomValidity(in DOMString error) void Not supported for button elements.

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

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}} {{Spec2('HTML WHATWG')}} The following attribute has been added: menu.
The type attribute can take one more value, "menu".
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}} {{Spec2('HTML5 W3C')}} The attributes tabindex and accesskey, are now defined on {{domxref("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.
{{SpecName('DOM2 HTML', 'html.html#ID-ID-48250443', 'HTMLAnchorElement')}} {{Spec2('DOM2 HTML')}} No change from {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}} {{Spec2('DOM1')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop(1.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Form-related attributes {{CompatVersionUnknown}} {{CompatGeckoDesktop(2.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
labels {{CompatVersionUnknown}} {{CompatNo}} {{unimplemented_inline(556743)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
menu & type="menu" {{experimental_inline}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatGeckoMobile(1.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Form-related attributes {{CompatVersionUnknown}} {{CompatGeckoDesktop(2.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
labels {{CompatVersionUnknown}} {{CompatNo}}{{unimplemented_inline(556743)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
menu & type="menu" {{experimental_inline}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

See also

  • HTML element implementing this interface: {{ HTMLElement("button") }}

Revision Source

<p>{{DomRef}}</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">Attributes</h2>
<p><em>Inherits attributes 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>
Revert to this revision