Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 the form elements. Different types of form elements include text input, radio button input, submit button, etc.
The <input> tag, helps you to take user input using the type attribute. To clear all the input in an HTML form, use the <input> tag with the type attribute as reset.
Example 1
The following example demonstrates how to clear all the input in HTML forms.
In this example, we are going to use the document.getElementId() to clear the text in the text field.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Remove HTML</title> </head> <body> <form> <input type="button" value="click here to clear" onclick="document.getElementById('inputText').value = '' "/> <input type="text" value="Tutorix" id="inputText" /> </form> </body> </html>
When we click on the clear button the text inside the input(text area) field gets cleared.
Example 2
The following example demonstrates how to clear all the input in HTML forms.
In this example, we are going to use the rest button to clear the text in the text field.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Clear all the input in HTML forms</title> </head> <body> <form> <input type="text" name="input" /> <input type="reset" value="reset" /> </form> </body> </html>
When we click on the clear button the text inside the input(text area) field gets cleared.
Example 3
The following example demonstrates how to clear all the input in HTML forms.
In this example, we are going to use onclick() method to clear the text in the text field.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Clear all the input in HTML forms</title> </head> <body> <form> <input type="text" value="Tutorix is the best e-learning platform" onclick="this.value=''"/> </form> </body> </html>
Example 4
You can try to run the following code to clear all the input in HTML forms −
<!DOCTYPE html> <html> <body> <form> Student Name:<br> <input type="text" name="sname"> <br> Student Subject:<br> <input type="text" name="ssubject"> <br> <input type="reset" value="reset"> </form> </body> </html>
Once the reset button is clicked, the form is cleared.
25K+ Views
