button

< html‎ | elements
Jump to: navigation, search

button

This page has been flagged with the following issues:


W3C Recommendation

Summary

The button element (<button>) defines a clickable button.


Overview Table

DOM Interface HTMLButtonElement

Inside a <button> element you can put content, like text or images. It generates a clickable button with the specific value of the element displayed on the button.

The <button> element can also be used as submit button to send form data to the server. The usage is the same as with any other button.

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. This is the default value.
  • reset: the button resets the form it is associated with. All form fields will be cleared.
  • button: the button has no default action

value
The initial value of the button.
disabled
This specifies whether the button is disabled or not (true, false). A disabled button won't be clickable.

Additional attributes (HTML 5, candidate specification)

autofocus
When this attribute is set to "true" the button will automatically be focused after the page load. Only one form-associated element can have this attribute set to "true".
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. Use this, if you don't want to put the submit button within the form itself.
formaction
The URL of a program that processes the information from the form. When present, it will override the action attribute of the form.
formmethod
The HTTP method to send the form data. This can either be "post" or "get". If specified, it will override the form's method attribute.
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
  • _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.

Examples

View live exampleThis examples uses the <button> element to display a clickable button.

HTML

<button name="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="fileOnTheServerWhichHandlesTheNewData.php">
  <label for="name">Name:</label>
  <input id="name" type="text" name="user_name">
  <button name="submitbutton">Submit</button>
</form>

Usage

Generally, a button 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.


Related specifications

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

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support Supported (when?)
Supported (when?)
Supported (when?)
Supported (when?)
Supported (when?)

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support Supported (when?)
?
Supported (when?)
?
?
?
?
Supported (when?)


Compatibility notes

Browser Version Note
Internet Explorer 8 and later The default value of the type attribute depends on the current document compatibility mode. In IE8 Standards mode, the default value is submit. In other compatibility modes and earlier versions of Windows Internet Explorer, the default value is button. When the BUTTON element is submitted in a form, the value depends on the current document compatibility mode. In IE8 mode, the value attribute is submitted. In other document modes and earlier versions of Internet Explorer, the innerText value is submitted.

See also

Related articles

Document Structure





  • button







HTML






























  • button





















… further results

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]