LAST UPDATED: JUNE 2, 2020
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:
-
Submit Button: created by setting the type attribute to submit
-
Reset Button: created by setting the type attribute to reset
-
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+
