Home > Article > Web Front-end > How to clear all inputs in HTML form?
How to clear all inputs in HTML form?
- PHPzforward
- 2023-09-01 11:21:091149browse
Using HTML forms, you can easily obtain user input. Use the tag to add form elements to capture user input. Different types of form elements include text inputs, radio button inputs, submit buttons, etc.
Tag Helps you get user input by using the type attribute. To clear all input in an HTML form, use the tag with the type attribute reset.
Example 1
The following example demonstrates how to clear all input in an HTML form.
In this example, we will use 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 the clear button, the text in the input (text area) field will be cleared.
The Chinese translation ofExample 2
is:Example 2
The following example demonstrates how to clear all input in an HTML form.
In this example, we will use the reset 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 the clear button, the text in the input (text area) field will be cleared.
Example 3
The following example demonstrates how to clear all input in an HTML form.
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>
The Chinese translation of Example 4
is:Example 4
You can try running the following code to clear all inputs in the HTML form -
<!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 will be cleared.
The above is the detailed content of How to clear all inputs in HTML form?. For more information, please follow other related articles on the PHP Chinese website!