HTML button Tag

The HTML <button> tag is used to create a clickable button on the webpage which can be used to perform some action or as an action button for HTML form. A button can be used to perform various tasks like submitting or resetting the details of the form, can be used for a hyperlink, etc., in short, if you are building a webpage and you want to have a button on your webpage you can use use the <button> tag for it.

  • <button> tag is generally used with the <form> tag to display the controls of the form.

  • We can also use the <input> tag for creating a submit button for HTML form, but then you cannot change the appearance of the button and can only change the text value which appears on the button.

  • The text, images, or any multimedia embedded in between the opening and closing tag of a button becomes content of the button.

  • Also, this is an inline element.

  • The <button> tag provides a type attribute using which you can create three kinds of button controls and these are: Submit button, reset button, and normal button.

Three kinds of Button:

  1. Submit Button: created by setting the type attribute to submit

  2. Reset Button: created by setting the type attribute to reset

  3. Normal Button: created by setting the type attribute to button

HTML <button> Tag - Syntax and Usage

The <button> element requires the start(opening) tag and end(closing) tag.

The Required syntax for the same is given below:

<button>
    <!-- Some content -->
</button>

HTML <button> Tag Attributes

HTML <button> tag supports Global attributes and Event attributes. Some of the common attributes used with the <button> tag are given below:

Attributes Description
autofocus allows the button control to get the focus as soon as the page loads.
form The form is used to refer to the id of the FORM element.
formtarget Specifies the destination such as a new tab, or a new window to load the browsing content.
formnovalidate This specifies that there is no need to validate the form at the time of submitting the button control.
formmethod specifies the method at the time of submitting the button control. The possible values are: get, post, put and delete.
formenctype This attribute is used to specify the type of content that is used to submit the form to the browser
name This attribute specifies the name of the button which is submitted with the form data
type This attribute is used to specify the type of button and its values are:- submit, reset and normal.
value This attribute is used to define the initial value of the button. This initial value is passed to the server in the params when the form is submitted.
autocomplete The use of this attribute on a <button> is non-standard and firefox specific.
disabled This attribute indicates that the user cannot interact with the button.

HTML <button> Tag Basic Example

Below we have a basic example for a clear understanding of <button> tag:

Default CSS styling for <button> tag:

None

Browser Support for HTML <button> tag

Following browsers support this attribute:

  • Firefox 1+

  • Google Chrome 1+

  • Internet Explorer 4+

  • Apple Safari 1+

  • Opera 5+