Do you think IIT Guwahati certified course can help you in your career?
Introduction
The reset button inHTMLis used to clear all input fields in a form and restore them to their default values. It is created using the <input type="reset"> or <button type="reset"> tag. This button is useful when users want to discard their input and start fresh.
In this article, you will learn about the reset button, its syntax, attributes, and how to style it using CSS.
Definition and Usage
A reset button in HTML is a type of input element that clears all the data entered in a form. When clicked, it resets every field in the form to its default value. This means text fields become empty, checkboxes get unchecked, radio buttons go back to their initial state, and dropdown menus return to the first option.
To add a reset button to your form, you use the `<input>` tag with the `type="reset"` attribute. For example:
In this code, the `<input type="reset">` creates the reset button. When you fill out the form and click "Reset," all fields will clear instantly.
The reset button is useful in situations where users might want to start over or correct mistakes without manually deleting everything. However, it’s important to use it wisely because accidentally clicking the reset button can erase all the information a user has entered.
Syntax
The reset button in HTML is created using the <input> element with the type attribute set to reset. The syntax is as follows:
<input type="reset" value="Reset Form">
Explanation:
The type="reset" specifies that this input element is a reset button.
The value attribute defines the text displayed on the button.
The fields Username and Age have default values (JohnDoe and 25).
If the user changes these values and clicks Reset, the fields return to their initial values.
Validation
Validation is an important concept when working with forms, including those that use a reset button. While the reset button itself doesn’t perform validation, it plays a role in how users interact with validated fields. Validation ensures that the data entered into a form meets specific criteria before submission. For example, if a field requires an email address, validation will check whether the input follows the correct format (e.g., `example@domain.com`).
When using a reset button, you need to be mindful of how it interacts with validation. If a user fills out a form incorrectly and then clicks the reset button, all their input—including invalid data—will be cleared. This can sometimes frustrate users who only wanted to fix one or two mistakes instead of starting over entirely.
To better understand this, let’s look at an example of a form with basic HTML5 validation and a reset button:
In this example, each input field has validation rules applied using HTML5 attributes like `required`, `minlength`, and `min`. If a user tries to submit the form without meeting these criteria, the browser will display an error message. However, clicking the reset button bypasses all validation and clears the form completely.
To avoid frustrating users, you can add a confirmation dialog before resetting the form. This gives users a chance to decide whether they really want to clear all their input. Let’s see how you can implement this:
<!DOCTYPE html>
<html>
<head>
<title>Reset Button with Confirmation</title>
<script>
function confirmReset() {
return confirm("Are you sure you want to reset the form? All data will be lost.");
}
</script>
</head>
<body>
<h2>Form with Reset Confirmation</h2>
<form action="/submit" method="post" onreset="return confirmReset()">
<label for="name">Enter your name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Enter your email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Output
In this updated code, the `onreset` attribute triggers a JavaScript function called `confirmReset()` when the reset button is clicked. This function displays a confirmation dialog box asking the user if they’re sure they want to reset the form. If the user clicks "Cancel," the form won’t reset.
Note: This approach improves the user experience by giving them control over whether to clear their input. It also reduces the risk of accidentally losing data due to a misplaced click.
Why Use HTML <input type="reset">?
Using a reset button in forms has multiple benefits:
Quick Data Clearing: Users can clear form fields with a single click, instead of manually deleting each entry.
Restoring Default Values: If certain fields have default values, the reset button restores them, reducing errors in form submissions.
Better User Experience: It improves user convenience, especially in long forms, where clearing fields manually can be time-consuming.
Error Handling: If a user enters incorrect data, they can reset the form instead of refreshing the page.
Interesting Facts about <input type="reset">
Does Not Work Without a Form: The reset button only works inside a <form> tag. If used outside a form, it won’t have any effect.
Does Not Affect Non-Form Elements: It only resets input fields, textareas, and select dropdowns but does not affect non-form elements like <p> or <div>.
Works Differently with JavaScript: If a form is managed with JavaScript, using the reset button may not always restore expected values.
Resets Radio and Checkbox Inputs: It will uncheck selected checkboxes and reset selected radio buttons to their default values.
Frequently Asked Questions
What does the reset button do in HTML?
The reset button clears all form fields, restoring them to their initial values.
Can a reset button be used outside a form?
No, the reset button only works inside a <form> tag; otherwise, it has no effect.
Does the reset button clear password fields?
Yes, it clears all input fields, including password fields.
Conclusion
In this article, we learned how to create a portfolio using HTML and CSS. A portfolio website typically includes sections like About Me, Projects, Skills, and Contact. Using HTML for structure and CSS for styling, you can design a professional and responsive layout. Understanding portfolio creation helps showcase skills, attract clients, and build an online presence effectively.
518+ registered 
