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 to clear all the input in HTML forms?
Using HTML forms, you can easily take user input. The <form> tag is used to get user input by adding form elements. Different types of form elements include text input, radio button input, submit button, etc.
To clear all the input in an HTML form, you have several methods available. The most common approaches include using the reset input type, JavaScript's getElementById() method, or direct onclick events. Each method serves different scenarios depending on whether you want to clear individual fields or all form data at once.
Method 1 ? Using JavaScript getElementById()
The getElementById() method allows you to target specific input fields and clear them individually. This approach gives you precise control over which fields to clear.
Example
Following example demonstrates how to clear a specific input field using JavaScript −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear Input with JavaScript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label for="inputText">Enter text:</label><br>
<input type="text" value="Sample text" id="inputText" style="padding: 5px; margin: 10px 0;"><br>
<input type="button" value="Clear Text"
onclick="document.getElementById('inputText').value = ''"
style="padding: 8px 15px; background: #007bff; color: white; border: none; cursor: pointer;">
</form>
</body>
</html>
When you click the "Clear Text" button, the text inside the input field gets cleared −
Enter text: [Sample text] [Clear Text] (After clicking: text field becomes empty)
Method 2 ? Using Reset Button
The reset input type provides a built-in HTML method to clear all form fields simultaneously. This is the most straightforward approach for clearing entire forms.
Example
Following example demonstrates using the reset button to clear all form inputs −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear Form with Reset Button</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form style="max-width: 400px;">
<label for="studentName">Student Name:</label><br>
<input type="text" name="sname" id="studentName" value="John Doe" style="padding: 5px; margin: 5px 0; width: 200px;"><br><br>
<label for="studentSubject">Student Subject:</label><br>
<input type="text" name="ssubject" id="studentSubject" value="Mathematics" style="padding: 5px; margin: 5px 0; width: 200px;"><br><br>
<input type="reset" value="Clear All Fields"
style="padding: 8px 15px; background: #dc3545; color: white; border: none; cursor: pointer;">
</form>
</body>
</html>
When you click the "Clear All Fields" button, both input fields are cleared to their original empty state −
Student Name: [John Doe] Student Subject: [Mathematics] [Clear All Fields] (After clicking: both fields become empty)
Method 3 ? Using Onclick Event
You can attach an onclick event directly to input fields to clear them when clicked. This provides immediate clearing functionality when users interact with the field.
Example
Following example shows how to clear an input field when it is clicked −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear Input on Click</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label>Click the input field to clear it:</label><br><br>
<input type="text" value="Click me to clear this text"
onclick="this.value=''"
style="padding: 10px; width: 300px; border: 2px solid #007bff; border-radius: 4px;">
</form>
</body>
</html>
When you click on the input field, the text gets immediately cleared −
Click the input field to clear it: [Click me to clear this text] (After clicking: field becomes empty and ready for new input)
Method 4 ? Clearing Multiple Fields with JavaScript Function
For more complex forms, you can create a JavaScript function that clears multiple specific fields without affecting the entire form.
Example
Following example demonstrates clearing multiple form fields using a custom JavaScript function −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear Multiple Fields</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form style="max-width: 400px;">
<h3>User Registration Form</h3>
<label for="username">Username:</label><br>
<input type="text" id="username" value="user123" style="padding: 5px; margin: 5px 0; width: 200px;"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" value="user@example.com" style="padding: 5px; margin: 5px 0; width: 200px;"><br><br>
<label for="phone">Phone:</label><br>
<input type="tel" id="phone" value="123-456-7890" style="padding: 5px; margin: 5px 0; width: 200px;"><br><br>
<button type="button" onclick="clearFields()"
style="padding: 8px 15px; background: #28a745; color: white; border: none; cursor: pointer;">Clear All</button>
</form>
<script>
function clearFields() {
document.getElementById("username").value = "";
document.getElementById("email").value = "";
document.getElementById("phone").value = "";
}
</script>
</body>
</html>
The custom function clears all specified fields when the "Clear All" button is clicked −
User Registration Form Username: [user123] Email: [user@example.com] Phone: [123-456-7890] [Clear All] (After clicking: all three fields become empty)
Comparison of Methods
Following table compares the different methods for clearing form inputs −
| Method | Use Case | Scope | Complexity |
|---|---|---|---|
| getElementById() | Clear specific individual fields | Single field | Simple |
| Reset Button | Clear all form fields at once | Entire form | Very Simple |
| Onclick Event | Clear field when user interacts | Single field | Simple |
| Custom JavaScript Function | Clear selected multiple fields | Multiple specific fields | Moderate |
Conclusion
There are multiple ways to clear HTML form inputs: using the reset button for entire forms, JavaScript's getElementById() for specific fields, onclick events for immediate clearing, and custom functions for selective field clearing. Choose the method that best fits your specific requirements and user experience goals.
29K+ Views
