search

Home  >  Article  >  Web Front-end  >  How to clear all inputs in HTML form?

How to clear all inputs in HTML form?

PHPz
PHPzforward
2023-09-01 11:21:091205browse

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.

How to clear all inputs in HTML form?

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 of

Example 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!

html this input
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Adding Color Type and Upload Type Options: A Beginner’s Step-by-Step Guide to Titan FrameworkNext article：Adding Color Type and Upload Type Options: A Beginner’s Step-by-Step Guide to Titan Framework

Related articles

See more