How to create a reset button?

The reset button is generally used within forms in HTML. It helps the user to erase all the values entered by the user in the forms in one go so that the user can re-enter the values. It is used for a specific purpose when users want the values in the forms to be changed.

HTML reset button

The reset button must be included inside the <form>. It is not functional outside the form element in HTML. The reset button can be created in two ways.

1. Reset button using <input> tag

The HTML reset button can be created using the input field. Add <input> tag with type="reset" attribute to create a reset button. It does not contain other attributes.

Example: Create a reset button using <input> tag

Here in the below example, we have taken a text input field, a number input field, a submit button, and a reset button. The values of the input fields wipe out as we click on the reset button.

2. Reset button using <button> tag

We can also use <button> tag to create a reset button instead of <input> tag. Add type="reset" within the <button>

Example: Create a reset button using <button> tag

Here, we have just replaced the <input> tag to <button> tag. Reset everything remains the same as above.

Conclusion

The HTML reset button provides the user to erase all the values on the forms with a click. The user does not need to waste the time to refresh the page. But a reset button should be used carefully because there are chances of losing the data if clicked mistakenly.