Open In App

HTML <input type=”reset”>

Last Updated : 11 Jul, 2025
Suggest changes
Share
1 Likes
Like
Report

The <input type="reset"> creates a reset button in a form that clears all the input fields back to their default values.

  • Does not reset disabled fields: Any input fields with the disabled attribute are ignored during reset.
  • Resets default values only: It resets to the original values specified in the HTML, not dynamically set values.
  • Affects hidden fields: Hidden inputs are also reset to their default values.
  • Does not reset placeholders: Placeholder text remains unchanged as it is not considered a value.
HTML 
<!DOCTYPE html> <html> <body> <form> <input type="text" name="username" value="GFG"> <input type="email" name="email" value="example@example.com"> <input type="reset" value="Reset Form"> </form> </body> </html>
  • The form includes fields for a username and email with default values.
  • Clicking the "Reset Form" button clears user-entered data and reverts fields to their original values(Default values here).

Syntax:

<input type="reset" value="Button Text">
  • <input>: Defines an input element.
  • type="reset": Specifies the reset functionality.
  • value="Button Text": Specifies the button's visible text.

Examples of <input type="reset"> usage:

Reset Checkboxes and Radio Buttons

Resets checkboxes and radio buttons to their default states.

HTML 
<!DOCTYPE html> <html> <body> <form> <label><input type="checkbox" name="subscribe" checked> Subscribe</label> <label><input type="radio" name="gender" value="male" checked> Male</label> <label><input type="radio" name="gender" value="female"> Female</label> <input type="reset" value="Reset Selection"> </form> </body> </html>

Styled Reset Button

We can style the button using inline or external CSS.

HTML 
<!DOCTYPE html> <html> <body> <form> <input type="text" name="username" value="GFG"> <input type="reset" value="Reset" style="background-color: blue; color: white; padding: 10px; border-radius: 5px;"> </form> </body> </html>

Why Use HTML <input type=”reset”>

  • Allows users to clear form data quickly.
  • Provides better user experience for long forms.
  • Prevents users from manually deleting field data one by one.
  • Simple to implement with minimal code.

Interesting Facts about <input type="reset">

  • Works only within the form scope: The reset button only affects inputs within the same <form> tag.
  • Custom styling allowed: It can be styled using CSS like any other button.
  • Resets text areas too: It clears or resets <textarea> elements in the form.
  • Can trigger JavaScript: You can bind events to the reset button for additional functionality.
  • Does not affect dynamically added fields: Fields added via JavaScript after page load won't have "default values" to revert to.
  • No confirmation by default Clicking a reset button immediately resets fields without asking for confirmation (you can implement custom confirmation using JavaScript).

M
manaschhabra2
Article Tags :

Explore

Lightbox