HTML button types

There are three HTML button types.

Type button
Type submit
Type reset

1. Type button

In this type, the button just becomes a normal clickable button. In the below example, if we click on the button, nothing special happens just a normal button.

1
<button type="button"> Click Me! </button>

2. Type submit

In this type, the button will submit your form and it will send your form data to the backend.

1
2
3
4
5
6
7
<form action="/Your route" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <button type="submit" value="Submit">Submit</button>
</form>

3. Type reset

In this type, the button will reset your form input fields or it will clear input fields values.

1
2
3
4
5
6
7
<form action="/Your route" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <button type="reset" value="Reset">Reset</button>
</form>

You can copy the above code and test one compiler to see the difference.