HTML <button> Tag

Topic: HTML5 Tags Reference« Prev|Next »

Description

The <button> tag creates a clickable button in an HTML form.

Buttons created with the <button> element function just like buttons created with the input element, but they offer richer rendering possibilities; as you can put content, like text or images inside the button element. For example, a button element that contains an image functions like and may resemble an <input> element whose type is set to image.

The following table summarizes the usages context and the version history of this tag.

Placement: Inline
Content: Any block, inline, and text
Start/End Tag: Start tag: required, End tag: required
Version: HTML 4, 4.01, 5

Usage Notes

  • If you use the <button> tag in an HTML form, different browsers may submit different values. Internet Explorer, prior version 9, will submit the text contained between the opening and closing tag of the button element, while other browsers will submit the content of the value attribute.
  • In IE7 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.

Syntax

The basic syntax of the <button> tag is given with:

HTML / XHTML: <button type="button|reset|submit"> ... </button>

The example below shows the <button> tag in action.

  • <form action="action.php" method="post">
  •     <p>
  •         First name:<input type="text" name="firstname">
  •         <button type="submit" value="Submit">Submit</button>
  •         <button type="reset" value="Reset">Reset</button>
  •     </p>
  • </form>

Tag-Specific Attributes

The following table shows the attributes that are specific to the <button> tag.

Attribute Value Description
autofocus autofocus This Boolean attribute specifies that the button should automatically get focus when the document is loaded.
disabled disabled This Boolean attribute disables the button for user interaction.
form form-id Specifies the <form> element that the button element is associated with (its form owner).
formaction URL Specifies the URL of a program that processes the information submitted by the button (only for type="submit").
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how the form data should be encoded when submitting the form data to the server (only for method="post")
formmethod get
post
Specifies the HTTP method that the browser will use to submit the form (only for type="submit").
formnovalidate formnovalidate This Boolean attribute specifies that the form data should not be validated when it is submitted (only for type="submit").
formtarget _blank
_self
_parent
_top

framename
Specifies a target to display the response that is received after submitting the form.
name unique-name Represents the name of the button.
type button
submit
reset
Specifies the type of button.
value text Specifies the initial value of the button.

Global Attributes

Like all other HTML tags, the <button> tag supports the global attributes in HTML5.


Event Attributes

The <button> tag also supports the event attributes in HTML5.


Browser Compatibility

The <button> tag is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 5+
 

Warning:The <button> tag should be used with caution (see Usage Notes) — or avoided entirely to be on the safe side. Use the <input> tag instead, to create the submit buttons in your HTML forms.


Further Reading

See tutorial on: HTML Form.

Related tags: <form>, <input>.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.