如何重置 HTML 表单中的全部输入字段

在网页开发中，HTML表单是与用户交互的重要元素。有时候，我们需要提供一个功能来重置表单中的所有输入字段，以便用户可以方便地重新填写信息。本文将介绍几种常见的方法来实现这一功能。

方法一：使用HTML的reset按钮

HTML提供了一个内置的reset按钮类型。只需在表单中添加一个input元素，并将其type属性设置为reset，就可以创建一个重置按钮。当用户点击这个按钮时，表单中的所有输入字段将恢复到它们的初始值。

例如：

<form>
  <input type="text" placeholder="姓名">
  <input type="email" placeholder="邮箱">
  <input type="reset" value="重置">
</form>

方法二：使用JavaScript重置表单

如果需要通过编程的方式来重置表单，JavaScript是一个很好的选择。可以通过获取表单元素的引用，然后调用其reset()方法来实现。

示例代码如下：

<form id="myForm">
  <input type="text" placeholder="姓名">
  <input type="email" placeholder="邮箱">
  <button onclick="resetForm()">重置</button>
</form>

<script>
function resetForm() {
  document.getElementById('myForm').reset();
}
</script>

方法三：遍历表单元素并逐个重置

还可以通过遍历表单中的所有输入元素，然后将它们的值设置为空或初始值来实现重置。这种方法更加灵活，可以根据具体需求进行定制。

以下是一个简单的示例：

<form id="myForm">
  <input type="text" placeholder="姓名">
  <input type="email" placeholder="邮箱">
  <button onclick="customReset()">重置</button>
</form>

<script>
function customReset() {
  var formElements = document.getElementById('myForm').elements;
  for (var i = 0; i < formElements.length; i++) {
    if (formElements[i].type === 'text' || formElements[i].type === 'email') {
      formElements[i].value = '';
    }
  }
}
</script>

通过上述方法，我们可以轻松地实现HTML表单中全部输入字段的重置功能，为用户提供更好的交互体验。