JavaScript 重置

在HTML中，我们可以使用重置按钮来重置表单。在本文中，我们将讨论如何使用JavaScript来重置表单。

在JavaScript中， reset() 方法和HTML中的重置按钮做相同的事情。它用于清除表单元素的所有值，可以将值设置为默认值。它不需要任何参数值，也不返回任何值。

语法

formElement.reset()

示例

为了说明JavaScript中reset()方法的使用，我们创建了一个简单的HTML文档，其中包含一个带有id=”myForm”的表单。在此表单中，有四个文本字段：“姓”、“名”、“年龄”和“电子邮件地址”。还有两个按钮：“提交”和“重置数据”。当我们点击“重置数据”按钮时，它调用了函数fun()，其中我们定义了JavaScript的reset()方法。

在函数fun()中，我们首先获取需要重置的表单的引用，然后应用reset()方法。现在，让我们看看相应的代码。

<!DOCTYPE html> 
<html>
<head> 
<title> reset() method </title>
</head>
<body style = "text-align: center;">
<div style = "background: pink;">
  <font color = "red" size = "6px">
    <b> Example of the reset() method </b>
  </font>
 </div>
    <div style = "background: lightblue;">
    <form id = "myForm" action = "#" style = "font-size: 20px;" >
    <p> First Name: <input type = "text" id = "fname" /></p>
    <p> Last Name: <input type = "text" id = "lname" /></p>
    <p> E-mail Id:   <input type = "email" id = "email" /></p>
    <p> Age:         <input type = "number" id = "age" /></p>
    <input type = "submit">
    <input type = "button" value = "Reset data" onClick = "fun()"/>
    </form>
    </div>
<script>
 function fun(){
   document.getElementById("myForm").reset();
 } 
</script>

</body>
</html>

输出

执行上述代码后，输出将是 –

JavaScript 重置