formreset详解

一、formreset概述

formreset方法可以重置表单中所有表单控件的值，而不需要用户一个一个地删减它们。此方法可用于在JavaScript中编写一个自定义的重置按钮。比如一个网页的注册表单中有很多输入框，点击重置按钮后就可以把这些输入框清空，值恢复到初始化的状态。

formreset属于HTML DOM，常常与JavaScript结合使用。在HTML，可以通过触发input type=”reset”提交按钮来触发表单重置。但是，在JavaScript中，我们可以通过form.reset()方法来触发表单重置。formreset和from.reset()的效果是一样的，都可以重置表单。

二、formreset的用法

formreset方法比较简单，只要获得form对象就可以使用了，也就是document.getElementById(formName)。其中，formName可以是HTML表单中的name属性或者id属性。

<!DOCTYPE html>
<html>
  <head>
    <title>formreset示例</title>
  </head>
  <body>
    <form name="myForm">
      <label>姓名:</label>
      <input type="text" name="username"><br>
      <label>邮箱:</label>
      <input type="email" name="email"><br>
      <input type="button" value="reset" onclick="resetForm()">
      <input type="submit" value="submit">
    </form>
    <script>
      function resetForm() {
        document.getElementById("myForm").reset();
      }
    </script>
  </body>
</html>

在这个示例中，formreset方法通过document.getElementById(“myForm”).reset();执行。点击Reset按钮后，表单的所有输入框都会被重置。此外，我们给Reset按钮添加了一个onclick事件，当点击Reset按钮时，会触发resetForm()函数来执行重置表单的方法。

三、reset和formreset的区别

虽然reset和formreset都可以重置表单，但是区别还是很明显的。

第一，reset有一个没有确定值的“警告对话框”，而formreset没有弹出任何警告对话框。

第二，reset只能重置表单的值，而formreset可以重置表单的默认值。

通过以下示例，可以更好的了解两种方法的区别。

<!DOCTYPE html>
<html>
  <head>
    <title>reset和formreset示例</title>
  </head>
  <body>
    <form name="myForm">
      <label>姓名:</label>
      <input type="text" name="username" value="张三"><br>
      <label>邮箱:</label>
      <input type="email" name="email" value="zhangsan@example.com"><br>
      <input type="reset" value="reset" onclick="alert('确定要重置表单吗？')">
      <input type="button" value="formreset" onclick="resetForm()">
    </form>
    <script>
      function resetForm() {
        document.getElementById("myForm").reset();
      }
    </script>
  </body>
</html>

在这个示例中，我们在姓名和邮箱的输入框中添加了默认值，如果不修改输入框中的内容，点击Reset按钮时就会弹出警告对话框。而formreset则没有弹出任何警告对话框，点击formreset按钮后，表单会重新回到初始的默认值，即姓名是“张三”，邮箱是“zhangsan@example.com”。

四、formreset的问题和解决方法

由于表单中可能存在大量的输入控件，因此表单的重置必须是具有一定的容错性，能够适应特定场合的需要。下面介绍一下需要注意的问题和解决方法。

1、重置范围

使用formreset时，应该清楚重置表单的范围。如果表单中有多个拥有相同name属性的表单元素，那么表单元素的初始值将被设置为最后的表单元素的值，在此之前由于表单数据变更，不会对其产生任何影响。

<!DOCTYPE html>
<html>
  <head>
    <title>重置范围示例</title>
  </head>
  <body>
    <form id="myForm">
      <label>动物1:</label>
      <input type="radio" name="animal" value="dog">狗
      <input type="radio" name="animal" value="cat">猫
      <br>
      <label>动物2:</label>
      <input type="radio" name="animal" value="dog">狗
      <input type="radio" name="animal" value="cat">猫
      <br>
      <input type="reset" value="reset">
    </form>
  </body>
</html>

在这个示例中，我们有两个拥有相同name属性的输入框，即两个狗和两个猫。当点击reset按钮的时候，会把表单中的数据重置为里面的最后一只动物，即最后一个猫或最后一只狗。

解决方法：

如果需要对特定的表单数据进行重置，那么可以选择在form中增加一个name属性，用于重置某个元素。比如在上面的示例中，可以将form的name属性设置为“resetAnimal”，然后点击reset按钮的时候，就会重置所有元素，而用form.resetAnimal来重置动物。

2、默认值设置

formreset方法只是将表单元素的值重置到初始状态，不能将表单的默认值也恢复到初始状态。

<!DOCTYPE html>
<html>
  <head>
    <title>默认值设置示例</title>
    <script>
      function resetForm() {
        document.getElementById("myForm").reset();
        document.getElementById("myForm").defaultValue="";
      }
    </script>
  </head>
  <body>
    <form id="myForm">
      <label>手机号:</label>
      <input type="tel" name="tel" value="13588888888" readonly>
      <br>
      <input type="reset" value="reset" onclick="resetForm()">
    </form>
  </body>
</html>

在这个示例中，我们把手机号输入框设置为只读（readonly），默认值为“13588888888”，点击reset按钮后，虽然可以清空输入框中的内容，但是默认值还是“13588888888”，如果再次查询，手机号仍然显示之前的号码。因此，我们需要在重置表单的时候，将“默认值”也恢复到初始状态。

3、文件上传控件

表单中的文件上传控件因为不能通过代码来设置一个初始值，所以我们无法使用formreset来重置控件。因为这样做会让文件上传控件设置为空，无法再重置回原有状态。因此，文件上传控件需要通过另一种方式来重置，例如重新刷新页面来实现。

五、总结

formreset方法是表单重置的一种简单、有效的方法。使用formreset可以快速地清空表单中的所有输入框，恢复到表单最开始时的状态。在使用formreset时，需要清楚重置表单的范围，设置表单的默认值，以及文件上传控件的问题等。

原创文章，作者：DHOV，如若转载，请注明出处：https://www.506064.com/n/131246.html