HTML <input type=”reset”>

Last Updated : 17 Apr, 2025

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="[email protected]">
  <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).

HTML <input type="search">

manaschhabra2

Improve

Article Tags :

HTML <input type=”reset”>

Syntax:

Reset Checkboxes and Radio Buttons

Styled Reset Button

Why Use HTML <input type=”reset”>

Interesting Facts about <input type=”reset”>

Similar Reads

Thank You!

What kind of Experience do you want to share?