HTML <button> Type Attribute

Introduction

In the HTML page, we can specify the button with the help of the button attribute value. It will be set in the web browser as a button element. The default types of <button> elements can vary from browser to browser.

Syntax for button type attribute:

We can specify the button type attribute with the help of the below syntax:

Attribute Values

Three types of attribute values are used in the button tag. With the help of this type of attribute value, we can specify the work of the button tag.

Submit: with the help of this attribute value, we can specify that it is a submit button. It is the default value for the submit button for all browsers except for Internet Explorer.
Button: with the help of this attribute value, we can specify that it is a clickable button. It is the default value for the Internet Explorer.
Reset: with the help of this attribute value, we can specify that it is a reset button. It is used to change the previous data from the form.

Let's take an example for each attribute value.

Example 1:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Example for button attribute value</title>
 </head>
 <body>
  <form action="#" method="get">
   <label for="fname">Enter Your First name:</label>

   <input
    type="text"
    id="fname"
    name="fname"
    placeholder="Enter your first name"
   />

   <label for="lname">Enter Your Last name:</label>
   <input
    type="text"
    id="lname"
    name="lname"
    placeholder="Enter your last name"
   />

   <input type="submit" value="Submit" />
  </form>
 </body>
</html>

Output:

Explanation:

In the above code, we create a form. It will accept the data from the user. When the user clicks the submit button, all the values will be stored in the server.

Example 2:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Example for button attribute value</title>
 </head>
 <body>
  <form action="#" method="get">
   <label for="fname">Enter Your First name:</label>

   <input
    type="text"
    id="fname"
    name="fname"
    placeholder="Enter your first name"
   /><br>

   <label for="lname">Enter Your Last name:</label>
   <input
    type="text"
    id="lname"
    name="lname"
    placeholder="Enter your last name"
   /><br>

   <input type="submit" value="Submit" />
   <input type="reset" value="Reset">
  </form>
 </body>
</html>

Output:

Explanation:

Example 3:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Example for button attribute value</title>
 </head>
 <body>
  <form action="#" method="get">
   <label for="fname">Enter Your First name:</label>

   <input
    type="text"
    id="fname"
    name="fname"
    placeholder="Enter your first name"
   /><br>

   <label for="lname">Enter Your Last name:</label>
   <input
    type="text"
    id="lname"
    name="lname"
    placeholder="Enter your last name"
   /><br>

   <input type="submit" value="Submit" />
   <input type="reset" value="Reset">
   <button type="button" value="Click me">Sign Up</button>
  </form>
 </body>
</html>

Output:

Explanation:

In the above code, we create a form. It will accept the data from the user. When the user clicks the submit button, all the values will be stored in the server. When the user clicks the reset button, it will clear the whole page. Also, we have created a button tag. Users can sign themselves on the webpage when they click on it.