HTML表单清除 - JavaScript

简介

当我们在HTML中创建表单时，通常会使用重置按钮来清除表单的输入。但是，重置按钮还原的仅仅是表单元素的值，而不是表单本身的状态。因此，为了清除表单的所有状态信息，我们需要使用JavaScript来重置表单。

本文将向程序员介绍如何使用JavaScript清除HTML表单。

使用方法

JavaScript方法

我们可以使用JavaScript中的reset()方法，将所有表单元素的值重置回初始状态。

document.getElementById("myForm").reset();

HTML方法

我们还可以在HTML中使用一个简单的按钮来清除表单。

<input type="reset" value="Reset Form">

示例

考虑以下表单，包含文本框和单选框等元素。

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="gender">Gender:</label>
  <input type="radio" name="gender" value="male" checked>Male
  <input type="radio" name="gender" value="female">Female<br><br>
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
  </select><br><br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset Form">
</form>

我们可以通过以下两种方法来清除表单：

1. 使用JavaScript方法：

document.getElementById("myForm").reset();

2. 使用HTML方法：

<input type="reset" value="Reset Form">

注意事项

重置表单会把表单元素的值重置为默认值，但不会清除表单本身的状态信息。因此，如果可能的话，最好手动将表单状态清除，以确保表单处于正确的状态。

结论

在HTML表单中使用JavaScript或HTML方法清除表单非常简单。使用reset()方法可以清除表单元素的值，使用HTML的reset按钮可以清除整个表单。但是，为了确保表单处于正确的状态，最好手动清除表单的状态信息。