How To Create a Reset Button in HTML

Besides just having a submit button where a user submits the data s/he has entered, you can also easily create a reset button to a form, so that if a user wants to delete all the information in the fields s/he has entered, all he has to do is click the 'reset' button and all that has been entered into the text boxes or fields will be cleared.

Below you can see a form with a reset button.

Name

Phone Number

Type information into the above form, as a test, and then click the 'Reset' button to test it. You should see that all information that you entered is cleared and erased. This is how reset buttons operate.

Coding

To create a reset button, the code to do is:

<input type="reset"/> </form>

If you want the reset button to have text on it other than "reset", you can add a value attribute to the reset input tag, and set the value attribute to whatever text you want the button to say. For example, the button below is a reset button with the text "Start Over" on it.

The code to create this is:

<input type="reset" value="Start Over"/> </form>

To create the reset button which we have at the beginning with the 2 text boxes, the complete HTML code to do so is:

HTML Code
<form action=""> <label>Name</label><input="text"id="txtName" name="txtName" value=""/><br> <label>Phone Number</label><input type="text" id="Phonenumber"/><br> <input type="reset"/> </form>

Summary: The only 2 attributes that the reset button uses are the type attribute, which is set to "reset" and the value attribute (optional) which can be made to be set the text on the button to whatever text is desired.