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
  • 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>

Tip: You can use the <optgroup> tag for grouping related buttons within a dropdown list. It will make your forms more accessible for the users, particularly when the user have to choose from a long list of buttons.

Tag-Specific Attributes

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

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

Element
<button>YesYesYesYesYes