mozilla

Revision 236618 of HTMLButtonElement

  • Revision slug: DOM/HTMLButtonElement
  • Revision title: HTMLButtonElement
  • Revision id: 236618
  • Created:
  • Creator: timemachine3030
  • Is current revision? No
  • Comment 4 words added

Revision Content

{{ DomRef() }}

HTML Button Element Interface

DOM Button objects expose the HTMLButtonElement {{ HTMLVersionInline("5") }} (or HTMLButtonElement {{ HTMLVersionInline("4") }}) interface, which provides properties and methods (beyond the element object interface they also have available to them by inheritance) for manipulating the layout and presentation of button elements.

Properties

Name Type Description
accessKey {{ HTMLVersionInline("4") }} DOMString

A single-character keyboard key to give access to the button. In {{ HTMLVersionInline("5") }} this attribute is inherited from {{ domxref("HTMLElement") }}

autofocus {{ HTMLVersionInline("5") }} 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 Boolean The control is disabled, meaning that it does not accept any clicks.
form readonly 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:

  • {{ HTMLVersionInline("5") }} The attribute can be the ID of any form element in the same document.
  • {{ HTMLVersionInline("4") }} The attribute is null.
formAction {{ HTMLVersionInline("5") }} DOMString The URI of a program 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 {{ HTMLVersionInline("5") }} 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 {{ HTMLVersionInline("5") }} 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 {{ HTMLVersionInline("5") }} 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 {{ HTMLVersionInline("5") }}{{ gecko_minversion_inline("2") }} 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 {{ HTMLVersionInline("5") }} {{ unimplemented_inline("556743") }} readonly NodeList A list of {{ HTMLElement("label") }} elements that are labels for this button.
name DOMString The name of the object when submitted with a form. {{ HTMLVersionInline("5") }} If specified, it must not be the empty string.
tabIndex {{ HTMLVersionInline("4") }} long Number that represents this element's position in the tabbing order. in {{ HTMLVersionInline("5") }} this attribute is inherited as a global attribute.
type {{ HTMLVersionInline("5") }} DOMString
{{ HTMLVersionInline("4") }} readonly 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.
validationMessage {{ HTMLVersionInline("5") }} readonly 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 {{ HTMLVersionInline("5") }} readonly ValidityState

The validity states that this button is in.

value DOMString

The current form control value of the button. 

willValidate {{ HTMLVersionInline("5") }} Boolean Indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.

Methods

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

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

See Also: button

Revision Source

<p>{{ DomRef() }}</p>
<h2>HTML Button Element Interface</h2>
<p>DOM <code>Button </code>objects expose the <a class=" external" href="http://www.w3.org/TR/html5/the-button-element.html#the-button-element" title="http://www.w3.org/TR/html5/the-button-element.html#the-button-element">HTMLButtonElement</a> {{ HTMLVersionInline("5") }} (or <a class=" external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">HTMLButtonElement</a> {{ HTMLVersionInline("4") }}) interface, which provides properties and methods (beyond the <a href="../../../../en/DOM/element" rel="internal">element</a> object interface they also have available to them by inheritance) for manipulating the layout and presentation of button elements.</p>
<h2>Properties</h2>
<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>accessKey {{ HTMLVersionInline("4") }}</td> <td>DOMString</td> <td> <p>A single-character keyboard key to give access to the button. In {{ HTMLVersionInline("5") }} this attribute is inherited from {{ domxref("HTMLElement") }}</p> </td> </tr> <tr> <td>autofocus {{ HTMLVersionInline("5") }}</td> <td>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>disabled</td> <td>Boolean</td> <td>The control is disabled, meaning that it does not accept any clicks.</td> </tr> <tr> <td>form</td> <td>readonly <a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></td> <td> <p>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.</p> <p>If the button is not a descendant of a form element, then:</p> <ul> <li>{{ HTMLVersionInline("5") }} The attribute can be the ID of any form element in the same document.</li> <li>{{ HTMLVersionInline("4") }} The attribute is null.</li> </ul> </td> </tr> <tr> <td>formAction {{ HTMLVersionInline("5") }}</td> <td>DOMString</td> <td>The URI of a program 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>formEncType {{ HTMLVersionInline("5") }}</td> <td>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>formMethod {{ HTMLVersionInline("5") }}</td> <td>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>formNoValidate {{ HTMLVersionInline("5") }}</td> <td>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>formTarget {{ HTMLVersionInline("5") }}{{ gecko_minversion_inline("2") }}</td> <td>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>labels {{ HTMLVersionInline("5") }} {{ unimplemented_inline("556743") }}</td> <td>readonly <a href="/En/DOM/NodeList" title="En/DOM/NodeList">NodeList</a></td> <td>A list of {{ HTMLElement("label") }} elements that are labels for this button.</td> </tr> <tr> <td>name</td> <td>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>tabIndex {{ HTMLVersionInline("4") }}</td> <td>long</td> <td>Number that represents this element's position in the tabbing order. in {{ HTMLVersionInline("5") }} this attribute is inherited as a <a href="/en/HTML/Global_attributes#attr-tabindex" title="en/HTML/Global attributes#attr-tabindex">global attribute</a>.</td> </tr> <tr> <td>type</td> <td>{{ HTMLVersionInline("5") }} DOMString<br> {{ HTMLVersionInline("4") }} readonly DOMString</td> <td> <p>Indicates the behavior of the button. This is an enumerated attribute with the following possible values:</p> <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> </ul> </td> </tr> <tr> <td>validationMessage {{ HTMLVersionInline("5") }}</td> <td>readonly DOMString</td> <td> <p>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 (<strong>willValidate</strong> is false), or it satisfies its constraints.</p> </td> </tr> <tr> <td>validity {{ HTMLVersionInline("5") }}</td> <td>readonly ValidityState</td> <td> <p>The validity states that this button is in.</p> </td> </tr> <tr> <td>value</td> <td>DOMString</td> <td> <p>The current form control value of the button. </p> </td> </tr> <tr> <td>willValidate {{ HTMLVersionInline("5") }}</td> <td>Boolean</td> <td>Indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.</td> </tr> </tbody>
</table>
<h2>Methods</h2>
<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> {{ HTMLVersionInline("5") }}</td> <td><code>boolean</code></td> <td>Not supported for button elements.</td> </tr> <tr> <td><code>setCustomValidity(in DOMString error)</code> {{ HTMLVersionInline("5") }}</td> <td><code>void</code></td> <td>Not supported for button elements.</td> </tr> </tbody>
</table>
<p>Use the {{ cssxref(":-moz-submit-invalid") }} pseudo-class to style submit buttons based on the validation of a form.</p>
<p>See Also: <a href="/en/HTML/Element/button" title="en/HTML/Element/button">button</a></p>
Revert to this revision