Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Why do we use reset button in HTML forms?
The reset button is used to reset all the input fields in HTML forms to their initial values. It gets added using the <input> tag with the type="reset" attribute. When clicked, it clears any user-entered data and restores all form elements to their original state.
The reset button is particularly useful in long forms where users might want to start over without manually clearing each field. It provides a quick way to undo changes and return to the form's default state.
Syntax
Following is the syntax for the reset button −
<input type="reset" value="Reset">
The value attribute specifies the text displayed on the button. If omitted, the browser displays default text like "Reset".
How Reset Button Works
When a user clicks the reset button, the following actions occur −
-
Text inputs − All text fields are cleared to empty strings unless they have a default value specified.
-
Checkboxes and radio buttons − Return to their original checked/unchecked state as defined in the HTML.
-
Select dropdowns − Reset to the option marked as
selected, or the first option if none is specified. -
Textarea elements − Clear to their original content or become empty if no default text was provided.
Basic Reset Button Example
Following example shows a simple form with a reset button −
<!DOCTYPE html>
<html>
<head>
<title>Reset Button Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form>
<label for="name">Enter Name:</label><br>
<input type="text" id="name" name="name" style="margin: 5px 0;"><br>
<label for="email">Enter Email:</label><br>
<input type="email" id="email" name="email" style="margin: 5px 0;"><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="3" cols="30" style="margin: 5px 0;"></textarea><br><br>
<input type="submit" value="Submit" style="margin-right: 10px;">
<input type="reset" value="Reset">
</form>
</body>
</html>
The output displays a contact form with input fields and both Submit and Reset buttons −
Contact Form Enter Name: [text input field] Enter Email: [email input field] Message: [textarea] [Submit] [Reset]
Reset Button with Default Values
When form elements have default values specified, the reset button restores them to those defaults rather than clearing them entirely.
Example
<!DOCTYPE html>
<html>
<head>
<title>Reset with Default Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Preferences</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" value="guest" style="margin: 5px 0;"><br>
<label for="country">Country:</label><br>
<select id="country" name="country" style="margin: 5px 0;">
<option value="us">United States</option>
<option value="uk" selected>United Kingdom</option>
<option value="ca">Canada</option>
</select><br>
<input type="checkbox" id="newsletter" name="newsletter" checked>
<label for="newsletter">Subscribe to newsletter</label><br><br>
<input type="submit" value="Save" style="margin-right: 10px;">
<input type="reset" value="Reset to Defaults">
</form>
</body>
</html>
In this example, clicking "Reset to Defaults" restores the username to "guest", the country to "United Kingdom", and checks the newsletter checkbox −
User Preferences Username: [guest] Country: [United Kingdom ?] ? Subscribe to newsletter [Save] [Reset to Defaults]
Styling Reset Buttons
Reset buttons can be styled using CSS to match your form design. You can also use the <button> element for more styling flexibility.
Example
<!DOCTYPE html>
<html>
<head>
<title>Styled Reset Button</title>
<style>
.reset-btn {
background-color: #f44336;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.reset-btn:hover {
background-color: #d32f2f;
}
.submit-btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-right: 10px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form>
<label for="fullname">Full Name:</label><br>
<input type="text" id="fullname" name="fullname" style="margin: 5px 0; padding: 8px; width: 200px;"><br><br>
<button type="submit" class="submit-btn">Register</button>
<button type="reset" class="reset-btn">Clear Form</button>
</form>
</body>
</html>
The output shows a styled form with a green submit button and a red reset button that changes color on hover.
Common Use Cases
Reset buttons are commonly used in the following scenarios −
-
Long registration forms − Allow users to quickly clear all entered data and start over.
-
Configuration panels − Let users revert settings to default values.
-
Search forms − Enable users to clear search criteria and filters.
-
Contact forms − Provide an easy way to clear the form after reviewing entered information.
Important Considerations
While reset buttons can be useful, consider these points before including them −
-
Accidental clicks − Users might accidentally click reset and lose their data. Consider adding confirmation dialogs for important forms.
-
User expectations − Many modern web forms don't include reset buttons, so users might not expect them.
-
Mobile considerations − On mobile devices, screen space is limited, so reset buttons should be clearly differentiated from submit buttons.
Conclusion
The reset button provides a convenient way for users to clear form data and return to default values. While useful for long forms and configuration panels, consider user experience and the potential for accidental data loss when deciding whether to include a reset button in your forms.
1K+ Views
