JavaScript教程-JavaScript 表单重置
在HTML中，我们可以使用 reset 按钮来重置表单。本文将讨论如何使用JavaScript来重置表单。
在JavaScript中，reset() 方法与HTML中的 reset 按钮执行相同的操作。它用于清除表单元素的所有值，可以将它们恢复为默认值。此方法不需要任何参数，并且也不返回任何值。
语法
formElement.reset();示例
为了演示如何使用JavaScript的 reset() 方法，我们创建了一个简单的HTML文档，其中包含一个带有 id = "myForm" 的表单。在表单中，有四个文本字段："First Name"、"Last Name"、"Age" 和 "E-mail Id"。还有两个按钮："Submit" 和 "Reset data"。当我们点击 Reset data 按钮时，它会调用名为 fun() 的函数，其中我们定义了JavaScript的 reset() 方法。
在函数 fun() 中，我们首先获取要重置的表单的引用，然后应用 reset() 方法。以下是代码示例：
<!DOCTYPE html>
<html>
<head>
<title>reset() 方法</title>
</head>
<body style="text-align: center;">
<div style="background: pink;">
<font color="red" size="6px">
<b>reset() 方法示例</b>
</font>
</div>
<div style="background: lightblue;">
<form id="myForm" action="#" style="font-size: 20px;">
<p>名字：<input type="text" id="fname" /></p>
<p>姓氏：<input type="text" id="lname" /></p>
<p>电子邮箱：<input type="email" id="email" /></p>
<p>年龄：<input type="number" id="age" /></p>
<input type="submit">
<input type="button" value="重置数据" onClick="fun()" />
</form>
</div>
<script>
function fun(){
document.getElementById("myForm").reset();
}
</script>
</body>
</html>输出
执行上述代码后，输出效果如下图所示：
填写文本字段的值后，如下图所示：
最后，单击 Reset data 按钮，表单的值将被重置，效果如下图所示：
