How to clear all inputs in HTML form?-HTML Tutorial-php.cn

How to clear all inputs in HTML form?

PHPz

Release： 2023-09-01 11:21:09

forward

1169 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!