In this section, we will learn what the type attribute is and how it works.

What is type Attribute in HTML <button> Tag?

HTML <button> element can be used for different purposes! For example, it could be used to reset all the data of a form (clean them away), or it could be used to send a form of data to a server.

This button also can be used for different purposes that are not related to forms.

So making sure what purpose an HTML <button> is serving, we can use the type attribute to set the type and hence the purpose of that <button> element.

HTML type Attribute in <button> Tag Syntax:

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

<button> Tag type Attribute Values

There are three potential values for the type attribute:

Name	Description
submit	Using this value means the target button element is used to submit a form data to a server.
reset	Using this value means the target button element is used to reset a form data.
button	Using this value means the target button is just a clickable button and has nothing to do with a form and so it could be used for other matters.

Example: using type attribute in HTML <button> tag

See the Pen using type attribute in HTML <button> tag by Omid Dehghan (@odchan1) on CodePen.

In the example above, fill the text boxes first and then hit the “Rest Button” of the form. After hitting this button, you’ll see the content of the boxes vanish! This is because the type of the button is set to “reset” and that means clean away the data of the target form.