Description

The HTML element <button> is used to define clickable buttons within an HTML form.

The button defined using the <button> element has some advantages over the button defined using the <input> element.

  • The button can be defined over a simple text using both of them.
  • The button can be defined over a text that can contain other elements like <i>, <b>, <strong>, <img>, etc., only using <button> element.

The below table summarizes its usage.

Usage Details
Placement It is displayed as an Inline element.
Contents It can contain Block elements, Inline elements, and text.
Tags Both the opening and closing tags are required.
Versions HTML 4, 4.01, and 5

Syntax

Here is the basic syntax of the <button> element.

<button type="button|reset|submit">...</button>

Examples

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Element - button</h1>
    <form action="notifications.php" method="post">
        <p>
            Email:<input type="text" name="email">
            <button type="submit" value="Submit">Submit</button>
            <button type="reset" value="Reset">Reset</button>
        </p>
    </form>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <button> tag.

Attribute Type Details
Element-Specific Attributes The tag <button> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <button> supports the HTML Global Attributes.
Event Attributes The tag <button> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <button> element.

Attribute Value Description
autofocus  autofocus This Boolean attribute specifies that the button should automatically get focused when the document is loaded.
disabled disabled This Boolean attribute disables the button for user interaction.
form  form-id Specifies the element <form> 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.

Browser Compatibility

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

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

Related Links