HTML - <button>
The HTML <button>
Element represents a clickable button.
Example
<button name="button">Click me</button>
Please note that this button has CSS applied.
Description
The HTML <button>
Element represents a clickable button.
Content categories | Flow content, phrasing content, Interactive content, listed, labelable, and submittable form-associated element, palpable content. |
---|---|
Permitted content | Phrasing content. |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parent elements | Any element that accepts phrasing content. |
DOM interface | HTMLButtonElement |
Element type | Inline |
Attributes
Includes the Global Attributes.
Name | Version | Description |
---|---|---|
autofocus |
HTML5 | This Boolean attribute lets you specify that the button 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. |
autocomplete |
The use of this attribute on a <button> is nonstandard and Firefox-specific. By default, unlike other browsers, Firefox persists the dynamic disabled state of a <button> across page loads. Setting the value of this attribute to off (i.e. autocomplete="off" ) disables this feature. See bug 654072. |
|
disabled |
This Boolean attribute indicates that the user cannot interact with the button. If this attribute is not specified, the button inherits its setting from the containing element, for example Firefox will, unlike other browsers, by default, persist the dynamic disabled state of a |
|
form |
HTML5 | The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a <form> element in the same document. If this attribute is not specified, the <button> element will be associated to an ancestor <form> element, if one exists. This attribute enables you to associate <button> elements to <form> elements anywhere within a document, not just as descendants of <form> elements. |
formaction |
HTML5 | The URI of a program that processes the information submitted by the button. If specified, it overrides the action attribute of the button's form owner. |
formenctype |
HTML5 | If the button is a submit button, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
If this attribute is specified, it overrides the |
formmethod |
HTML5 | If the button is a submit button, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
If specified, this attribute overrides the |
formnovalidate |
HTML5 | If the button is a submit button, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the button's form owner. |
formtarget |
HTML5 | If the button is a submit button, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the button's form owner. The following keywords have special meanings:
|
name |
The name of the button, which is submitted with the form data. | |
type |
The type of the button. Possible values are:
|
|
value |
The initial value of the button. It defines the value associated with the button which is submitted with the form data. This value is passed to the server in params when the form is submitted. |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
formaction attribute |
9.0 | 4.0 (2.0) | 10 | ? | ? |
formenctype attribute |
9.0 | 4.0 (2.0) | 10 | 10.6 | ? |
formmethod attribute |
9.0 | 4.0 (2.0) | 10 | ? | ? |
autofocus attribute |
5.0 | 4.0 (2.0) | 10 | 9.6 | 5.0 |
menu value for type attribute |
No support | No support[1] | No support | No support | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
formaction attribute |
? | 4.0 (2.0) | ? | ? | ? |
formenctype attribute |
? | 4.0 (2.0) | ? | ? | ? |
formmethod attribute |
? | 4.0 (2.0) | ? | ? | ? |
menu value for type attribute |
? | ? | ? | ? | ? |
[1] Gecko does not implement this feature yet. See bug 1241353.
Clicking and focus
Whether clicking on a <button>
causes it to (by default) become focused varies by browser and OS. The results for <input>
of type="button"
and type="submit"
were the same.
Desktop Browsers | Windows 8.1 | OS X 10.9 |
---|---|---|
Firefox 30.0 | Yes | No (even with a tabindex ) |
Chrome 35 | Yes | Yes |
Safari 7.0.5 | N/A | No (even with a tabindex ) |
Internet Explorer 11 | Yes | N/A |
Presto (Opera 12) | Yes | Yes |
Mobile Browsers | iOS 7.1.2 | Android 4.4.4 |
---|---|---|
Safari Mobile | No (even with a tabindex ) |
N/A |
Chrome 35 | No (even with a tabindex ) |
Yes |
Notes
<button>
elements are much easier to style than <input>
elements. You can add inner HTML content (think <em>
, <strong>
or even <img>
), and make use of :after
and :before
pseudo-element to achieve complex rendering while <input>
only accepts a text value attribute.
IE7 has a bug where when submitting a form with <button type="submit" name="myButton" value="foo">Click me</button>
, the POST
data sent will result in myButton=Click me
instead of myButton=foo
.
IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.
This bug has been fixed in IE8.
Firefox will add, for accessibility purposes, a small dotted border on a focused button. This border is declared through CSS, in the browser stylesheet, but you can override it if necessary to add your own focused style using button
::-moz-focus-inner
{ }
Firefox will, unlike other browsers, by default, persist the dynamic disabled state of a <button>
across page loads. Setting the value of the autocomplete
attribute to off
disables this feature. See bug 654072.
Firefox <35 for Android sets a default background-image
gradient on all buttons (see bug 763671). This can be disabled using background-image: none
.
See Also
Other elements that are used for creating forms: <form>
, <datalist>
, <fieldset>
, <input>
,<keygen>
, <label>
, <legend>
, <meter>
, <optgroup>
, <option>
, <output>
, <progress>
, <select>
, <textarea>
.
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of '<button>' in that specification. |
Living Standard | |
HTML5 The definition of '<button>' in that specification. |
Recommendation | |
HTML 4.01 Specification The definition of '<button>' in that specification. |
Recommendation |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/button