Showing content from https://www.geeksforgeeks.org/html/html-input-typereset/ below:
HTML <input type=”reset”> - GeeksforGeeks
HTML <input type=”reset”>
Last Updated : 11 Jul, 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="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).
RetroSearch is an open source project built by @garambo
| Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4