如何使用JavaScript重置或清除表单？

本教程教我们如何使用JavaScript重置或清除表单。对于用户来说，这个选项非常有用，当他们填写了错误的表单，并在提交之前了解到错误后，他们想要删除所有数据。如果表单很大，那么手动删除所有内容可能很困难，所以最好使用JavaScript的reset()方法。

reset()方法在JavaScript中定义，在点击它时，与其onclick()方法相关联的表单将重置提供的表单的每个输入部分。

语法

我们已经看到了reset()函数的基础知识，现在让我们转到它的语法 –

var element = document.getElementById( Id_of_required_form ).
element.reset()

在上述语法中，“ 所需表单的ID ”是我们要重置或清除的表单的ID。我们使用DOM的‘ getElementById ’方法获取表单，并将其存储在变量‘element’中。

之后，通过使用reset（）方法，我们通过调用它重置或清除ID为‘ 所需表单的ID ’的元素的表单。

算法

我们已经看到了通过获取其ID和 reset（） 方法来重置或清除表单的语法，让我们逐步了解完整的算法以更好地理解它。

创建用户表单

在这些步骤中，我们将创建表单，其中我们将定义或创建许多输入框以供用户输入以填充表单，并且将调用函数来从下拉列表中删除对象的按钮。

首先，我们必须使用

form> 标签创建要使用JavaScript的 reset() 方法重置或清除的表单。

在表单中，我们使用标签创建了一些输入框，其中用户可以写入数据。
这些输入框将是文本和数字类型，以获取所需类型的用户输入。
在为用户输入定义“输入”后，我们将使用标签定义一个输入字段，并将其设置为按钮类型，并定义’ onclick ‘事件，该事件将调用稍后在脚本中定义的函数。

定义用于删除的脚本或函数

在这些步骤中，我们将定义一个函数，该函数将在上述定义的按钮的“ onclick ”事件中被调用。

首先，我们将使用‘ function ’关键字创建一个函数，并给它一个在“ onclick ”事件中被调用的名称。
在定义的函数中，我们将创建一个变量来存储调用‘ document.getElementById() ’方法的返回值。
我们将将上述定义的表单的‘ id ’作为参数传递给调用‘ document.getElementById() ’方法。
通过使用变量（包含对方法调用的返回值）的reset方法，我们可以将每个输入字段重置为空。

这些是使用JavaScript重置或清除表单的基本步骤，现在让我们看一些示例以更好地理解上述步骤。

示例

在这个例子中，我们将逐步按照上面定义的算法来实现，让我们实现代码 –

<!DOCTYPE html>
<html>
<body>
   <h3>Fill out the below-given form and click the reset button to see the working of the reset() function in JavaScript.</h3>
   <form id=" form_id ">
      Student Name <br>
      <input type="text" name="sname"> <br>

      Student Subject <br>
      <input type = "password" name = "ssubject" > <br>

      Student Roll Number <br>
      <input type = "roll_no" name = "roll_number" > <br>
      <input type = "button" onclick = "newFunction()" value = "Reset" >
   </form>
   <script>
      function newFunction(){
        var element = document.getElementById(" form_id ");
         element.reset()
      }
   </script>
</body>
</html>

在上面的输出中，我们得到了一个表单，其中有一些输入空间，用户可以在其中提供一些输入，最后有一个重置按钮，将表单重置为原始或初始表单。