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.
- 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.
Styled Reset Button
We can style the button using inline or external CSS.
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).
