数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML DOM 表单 reset() 方法
HTML DOM 表单 reset() 方法用于重置所有 表单 元素的值并显示用表单元素的 value 属性指定得默认值。它充当清除表单数据的重置按钮，且不使用任何类型的参数。
语法
表单 reset() 方法的语法如下 −
formObject.reset()
示例
让我们看一个表单 reset() 方法的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
form{
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function ResetForm() {
document.getElementById("FORM1").reset();
document.getElementById("Sample").innerHTML="Form has been reset";
}
</script>
</head>
<body>
<h1>Form reset() method example</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
<input type="button" onclick="ResetForm()" value="RESET">
</form>
<p id="Sample"></p>
</body>
</html>
输出
这将产生以下输出 −
点击重置按钮 −
在上面的示例中，我们 −
首先创建了一个 id 为 FORM1、method 为 post、action 为 /sample_page.php 的表单。它包含两个 type 为 text 的输入框、一个提交按钮和一个重置按钮。
<form id="FORM1" method="post" action="/sample_page.php"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Age <input type="text" name="Age"></label> <br><br> <input type="submit" value="SUBMIT"> <input type="button" onclick="ResetForm()" value="RESET"> </form>
点击重置按钮时执行 ResetForm() 函数。
<input type="button" onclick="ResetForm()" value="RESET">
ResetForm() 方法使用 文档对象 getElementById() 方法 获取 <form> 元素，然后对其调用 reset() 方法。这将清除表单元素中的所有数据。最后，使用 innerHTML 属性在 ID 为 “Sample” 的段落中显示反映此更改的预期文本 −
function ResetForm() {
document.getElementById("FORM1").reset();
document.getElementById("Sample").innerHTML="Form has been reset";
}
更新日期： 2023-11-18
1K+ 浏览量
广告