button

< html‎ | elements
Jump to: navigation, search

button

This article is In Progress.


W3C Recommendation

Summary

The button element represents a clickable button.


Overview Table

DOM Interface HTMLButtonElement

You can put text or images inside a button element. If the element is not disabled, the user can activate the button.

By default, the button element is used to submit form data. Modifying the type attribute can change this behavior.

Attributes (HTML 4)

name
The name of the button. This can be used to identify which button was used to submit a form.
type
This specifies the type of the button. If omitted, the type is submit. The following types are possible:
  • submit: the button submits the form it is associated with and sends the form data to the server. This is the default value.
  • reset: the button resets the form it is associated with. This will set the containing fields to their initial values.
  • button: the button has no default behavior. Useful to bind JavaScript click events

value
The initial value of the button.
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 fieldset if there is no containing element with the disabled attribute set, then the button is enabled. A disabled button isn’t clickable.

Additional attributes (HTML 5, candidate specification)

autofocus
When this attribute is set to "true" the button will have input focused after 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.
form
Specifies which form the button is associated with. The value of the attribute must be the id attribute of the form. If this attribute is not specified, the button must be a descendant of the form itself to be able to submit form data. This attribute enables you to place button elements anywhere within a document, not just as descendants of their form elements.
formaction
The URI of a program that processes the information from the form. When present, it will override the action attribute of the associated form.
formmethod
The HTTP method to send the form data. This can either be post or get. If specified, it will override the method attribute of the associated form. Possible values are:
  • post: The data from the form is included in the body of the form and is sent to the server.
  • get: The data from the form are appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.
formnovalidate
If the button is a submit button, this attribute specifies whether the form should be validated or not. It overrides the novalidate attribute of the form it belongs to.
formtarget
This attribute is a keyword, indicating where to display the response that is received after submitting the form. This can be one of the following:
  • _self: load the response into the same context as the form itself. This is the default value.
  • _blank: load the response into a new, unnamed context (Browser window)
  • _parent: loads the response into the parent context. If there is no parent, it will behave the same as _self.
  • _top: loads the response into the top-most context. This is the browsing context of an ancestor of the current context. If there is no parent, it will behave the same as _self.

All these attributes, except name, have default values and can be omitted.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
1.0
Yes
?
Yes
?
Yes
?
Yes
formaction attribute
9.0
Yes
?
Unknown
10
Yes
?
Unknown
?
Unknown
formenctype attribute
9.0
Yes
?
Unknown
10
Yes
10.6
Yes
?
Unknown
formmethod attribute
9.0
Yes
?
Unknown
10
Yes
?
Unknown
?
Unknown
autofocus attribute
5.0
Yes
?
Unknown
10
Yes
9.6
Yes
5.0
Yes

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
?
Yes
1.0
Yes
?
Yes
?
Yes
?
Yes
formaction attribute
?
Unknown
4.0
Yes
?
Unknown
?
Unknown
?
Unknown
formenctype attribute
?
Unknown
4.0
Yes
?
Unknown
?
Unknown
?
Unknown
formmethod attribute
?
Unknown
4.0
Yes
?
Unknown
?
Unknown
?
Unknown

Examples

View live exampleThis examples uses the <button> element to display a clickable button with out sending or reseting a form.

HTML

<button name="myButton" type="button">Click me</button>

View live exampleThis example shows how to use a submit <button> to send a form. Read about the form element to get further information about how to use forms.

HTML

<form action="dataReceiverURI">
  <label for="name">Name:</label>
  <input id="name" type="text" name="user_name">
  <button name="mySubmitButton">Submit</button>
</form>

View live exampleThis example shows how to reset a form with use of <button="reset">. Read about the form element to get further information about how to use forms.

HTML

<form>
  <label for="name">Name:</label>
  <input id="name" type="text" name="user_name" >
  <button name="myResetButton">reset</button>
</form>

Usage

Generally, the button element can be used whenever there should be a button clickable by the user.

The ending tag is mandatory. The button should have a descriptive text inside it, otherwise the button will be empty and the user won't know what the button will do.

Please note that styling a submit button using the <button> element is easier than styling an input element with type submit.

Notes

Since the default for the type attribute is submit, the type can be omitted if no other type needs to be used. Historical browser versions may have different standard type values.

Firefox for Android, by default, sets a background-image gradient on all button elements. This can be disabled using background-image: none.

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 Mozilla Bug #654072.


Related specifications

Specification Status Related Changes
HTML 4.01 Recommendation
HTML5 W3C Candidate Recommendation
WhatWG HTML Living Standard Living Standard

See also

Related articles

Document Structure




  • button







HTML































  • button




















… further results

Other articles

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: [<button> on MDN Article]

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]