Javascript 重置表单

在前端开发中，表单的重置操作非常常见。通过JavaScript代码，我们可以方便地重置表单中的文本框、单选框、多选框等元素的值，使其恢复到初始状态。本文将为程序员介绍如何通过JavaScript来实现表单的重置操作。

HTML表单的重置

首先，我们需要先了解HTML表单本身的重置方式。HTML表单元素中有一个reset方法，可以用来重置表单。我们可以通过以下代码来调用表单的reset方法：

<form id="myForm">
  <input type="text" name="username" placeholder="请输入用户名"/>
  <input type="password" name="password" placeholder="请输入密码"/>
  <button type="submit">提交</button>
  <button type="button" onclick="document.getElementById('myForm').reset()">重置</button>
</form>

在上面的代码中，我们在表单中添加了一个“重置”按钮，并在该按钮的onclick事件中调用表单的reset方法。当我们点击“重置”按钮时，表单中的输入框的值就会重置为初始状态。

通过JavaScript重置表单

除了使用表单的reset方法，我们还可以通过JavaScript来重置表单。这种方法可以为我们带来更多的灵活性和自定义功能。

以下是通过JavaScript重置表单的具体步骤：

1. 获取表单元素

首先，我们需要获取到需要重置的表单元素。我们可以通过以下代码获取表单元素：

var form = document.getElementById('myForm');

在上述代码中，我们获取了ID为“myForm”的表单元素并将其保存在form变量中。

2. 重置表单

接下来，我们需要重置表单中的元素。我们可以通过以下代码来完成该操作：

form.reset();

在上述代码中，我们调用了表单的reset方法，将表单中各元素的值重置为初始状态。

3. 阻止默认事件

最后，我们需要防止表单的默认行为。我们可以通过以下代码来完成该操作：

event.preventDefault();

在上述代码中，我们阻止了事件的默认行为。这一步是非常重要的，因为如果不阻止默认行为，表单提交事件就会触发，导致表单被提交到后台。

完整代码

<form id="myForm">
  <input type="text" name="username" placeholder="请输入用户名"/>
  <input type="password" name="password" placeholder="请输入密码"/>
  <button type="submit">提交</button>
  <button type="button" onclick="resetForm()">重置</button>
</form>

<script>
function resetForm() {
  var form = document.getElementById('myForm');
  form.reset();
  event.preventDefault();
}
</script>

在上述代码中，我们添加了一个id为“myForm”的表单元素，并在该表单中添加了一个“重置”按钮。当用户点击该按钮时，JavaScript代码会调用resetForm函数，重置表单并防止表单被提交到后台。