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 按钮,表单的值将被重置,效果如下图所示: