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
Selected Reading
How to reset or clear a form using JavaScript?
This tutorial teaches us how to reset or clear a form using JavaScript. This option is very helpful for users when they have filled the wrong data and want to clear everything at once. The reset() method provides an efficient way to restore all form fields to their initial values.
The reset() method is a built-in JavaScript function that clears all input fields in a form and restores them to their default values.
Syntax
document.getElementById("formId").reset();
// or
document.forms["formName"].reset();
The getElementById() method retrieves the form element by its ID, and then reset() clears all form fields.
Example: Basic Form Reset
<!DOCTYPE html>
<html>
<head>
<title>Form Reset Example</title>
</head>
<body>
<h3>Student Registration Form</h3>
<form id="studentForm">
<label>Student Name:</label><br>
<input type="text" name="sname" placeholder="Enter your name"><br><br>
<label>Email:</label><br>
<input type="email" name="email" placeholder="Enter your email"><br><br>
<label>Roll Number:</label><br>
<input type="number" name="rollNo" placeholder="Enter roll number"><br><br>
<label>Subject:</label><br>
<select name="subject">
<option value="">Select Subject</option>
<option value="math">Mathematics</option>
<option value="science">Science</option>
<option value="english">English</option>
</select><br><br>
<input type="button" onclick="resetForm()" value="Reset Form">
<input type="button" onclick="submitForm()" value="Submit">
</form>
<div id="message"></div>
<script>
function resetForm() {
document.getElementById("studentForm").reset();
document.getElementById("message").innerHTML = "<p style='color: green;'>Form has been reset!</p>";
}
function submitForm() {
document.getElementById("message").innerHTML = "<p style='color: blue;'>Form submitted! (Demo only)</p>";
}
</script>
</body>
</html>
Alternative Methods
Using Form Name
<!DOCTYPE html>
<html>
<body>
<form name="myForm">
<input type="text" name="username" placeholder="Username"><br><br>
<input type="password" name="password" placeholder="Password"><br><br>
<input type="button" onclick="clearForm()" value="Clear">
</form>
<script>
function clearForm() {
document.forms["myForm"].reset();
alert("Form cleared!");
}
</script>
</body>
</html>
Form Reset with Default Values
<!DOCTYPE html>
<html>
<body>
<h3>Profile Form with Defaults</h3>
<form id="profileForm">
<input type="text" name="name" value="John Doe" placeholder="Full Name"><br><br>
<input type="email" name="email" value="john@example.com" placeholder="Email"><br><br>
<input type="text" name="city" value="New York" placeholder="City"><br><br>
<textarea name="bio" placeholder="Bio">Software Developer</textarea><br><br>
<input type="button" onclick="resetToDefaults()" value="Reset to Defaults">
</form>
<script>
function resetToDefaults() {
document.getElementById("profileForm").reset();
console.log("Form reset to default values");
}
</script>
</body>
</html>
Comparison of Reset Methods
| Method | Syntax | Use Case |
|---|---|---|
| getElementById | document.getElementById("id").reset() |
Most common, uses form ID |
| forms collection | document.forms["name"].reset() |
Uses form name attribute |
| HTML reset button | <input type="reset"> |
Built-in HTML solution |
Key Points
- The
reset()method restores all form fields to their initial values - It works with all form elements: input, select, textarea, etc.
- Default values specified in HTML are preserved after reset
- The method doesn't validate or submit the form
Conclusion
The reset() method provides a simple way to clear form data in JavaScript. Use document.getElementById("formId").reset() to instantly restore all form fields to their initial state, making it easy for users to start over.
Updated on: 2026-03-15T23:18:59+05:30
45K+ Views
Advertisements