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
How do we reset all the input fields in HTML forms?
In HTML forms, we often need to reset all input fields to their default values. This is accomplished using the reset button, which clears all user-entered data and restores form elements to their original state.
HTML provides a built-in mechanism through the <input> element with type="reset". When clicked, this button automatically resets all form controls within the same form to their initial values − text fields become empty, checkboxes return to their default checked state, and select dropdowns revert to their default selection.
Syntax
Following is the syntax for creating a reset button −
<input type="reset" value="Reset">
The value attribute is optional and sets the text displayed on the button. If omitted, the browser uses a default label like "Reset".
Basic Reset Button Example
Following example demonstrates a simple form with text input and reset functionality −
<!DOCTYPE html>
<html>
<head>
<title>Basic Reset Button</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Information</h2>
<form>
<label for="username">Enter Username:</label><br>
<input type="text" id="username" name="username" placeholder="Your username"><br><br>
<input type="reset" value="Clear Form">
</form>
</body>
</html>
Type some text in the input field and click "Clear Form" to see the reset functionality in action.
Multiple Input Fields Reset
The reset button clears all input fields within the same form, regardless of their type −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Fields Reset</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Registration Form</h2>
<form>
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="name" value="John Doe"><br><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" value="25"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" value="john@example.com"><br><br>
<input type="reset" value="Reset All Fields">
<input type="submit" value="Submit">
</form>
</body>
</html>
The form loads with default values. Clicking "Reset All Fields" will restore all inputs to their original values, while "Submit" would process the form data.
Full Name: John Doe Age: 25 Email: john@example.com [Reset All Fields] [Submit]
Reset Button with Various Form Elements
Following example shows how the reset button affects different types of form elements −
<!DOCTYPE html>
<html>
<head>
<title>Comprehensive Form Reset</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Complete Form Example</h2>
<form>
<label for="student-name">Student Name:</label><br>
<input type="text" id="student-name" name="sname"><br><br>
<label for="subject">Subject:</label><br>
<select id="subject" name="subject">
<option value="">Choose a subject</option>
<option value="math" selected>Mathematics</option>
<option value="science">Science</option>
<option value="english">English</option>
</select><br><br>
<label>Grade Level:</label><br>
<input type="radio" id="elementary" name="grade" value="elementary">
<label for="elementary">Elementary</label><br>
<input type="radio" id="middle" name="grade" value="middle" checked>
<label for="middle">Middle School</label><br>
<input type="radio" id="high" name="grade" value="high">
<label for="high">High School</label><br><br>
<input type="checkbox" id="newsletter" name="newsletter" checked>
<label for="newsletter">Subscribe to newsletter</label><br><br>
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="3" cols="40">Default comment text</textarea><br><br>
<input type="reset" value="Reset Form">
<input type="submit" value="Submit">
</form>
</body>
</html>
This comprehensive example shows how reset affects all form elements − text inputs clear, select dropdowns return to their default selection, radio buttons and checkboxes revert to their original state, and textareas clear to their default content.
Reset Button vs JavaScript Reset
While the HTML reset button is the standard approach, you can also reset forms using JavaScript for more control −
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Form Reset</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>JavaScript Reset Example</h2>
<form id="myForm">
<label for="firstname">First Name:</label><br>
<input type="text" id="firstname" name="firstname" value="John"><br><br>
<label for="lastname">Last Name:</label><br>
<input type="text" id="lastname" name="lastname" value="Doe"><br><br>
<input type="reset" value="HTML Reset">
<button type="button" onclick="resetForm()">JavaScript Reset</button>
</form>
<script>
function resetForm() {
document.getElementById("myForm").reset();
}
</script>
</body>
</html>
Both buttons perform the same function, but the JavaScript approach allows for additional logic before or after the reset operation.
Key Differences Between Reset Methods
| HTML Reset Button | JavaScript Reset |
|---|---|
| Built-in browser functionality | Requires custom JavaScript code |
| Immediate reset on click | Can include validation or confirmation |
| Cannot be customized | Fully customizable behavior |
| Works without JavaScript enabled | Requires JavaScript to be enabled |
| Standard form element behavior | Can combine with other actions |
Conclusion
The HTML reset button using <input type="reset"> is the simplest and most reliable method to clear all form fields. It automatically resets all form elements within the same form to their default values, providing a consistent user experience across different browsers and devices.
3K+ Views
