HTML 如何清空表单

在本文中，我们将介绍如何使用 HTML 清空表单的内容。清空表单是指将表单中已经填写的数据全部重置，使表单恢复到初始状态。

阅读更多：HTML 教程

方法一：使用 JavaScript 重置表单

HTML 提供了一种简单的方式来重置表单，即使用 JavaScript 的 reset() 函数。通过在表单元素中添加一个按钮，并在按钮被点击时调用 reset() 函数，可以清空表单的内容。

<form id="myForm">
   <label for="name">姓名：</label>
   <input type="text" id="name" name="name"><br><br>
   <label for="email">邮箱：</label>
   <input type="email" id="email" name="email"><br><br>
   <input type="submit" value="提交">
   <input type="reset" value="重置" onclick="document.getElementById('myForm').reset();">
</form>

在上面的示例代码中，我们使用了一个重置按钮，并在按钮的 onclick 属性中调用了 reset() 函数。当用户点击该按钮时，表单中的所有输入框会被清空，表单恢复到初始状态。

方法二：使用 HTML 的 reset 按钮

HTML 表单中的 reset 按钮也可以用来清空表单内容。只需要向表单中添加一个 type 属性值为 “reset” 的按钮，点击该按钮即可清空表单。

<form>
   <label for="name">姓名：</label>
   <input type="text" id="name" name="name"><br><br>
   <label for="email">邮箱：</label>
   <input type="email" id="email" name="email"><br><br>
   <input type="submit" value="提交">
   <input type="reset" value="重置">
</form>

在上面的示例中，我们添加了一个重置按钮，按钮的 type 属性值设置为 “reset”。点击该按钮将清空表单中所有的输入框内容。

方法三：使用 JavaScript 清空表单数据

除了使用 JavaScript 的 reset() 函数之外，还可以使用 JavaScript 代码来手动清空表单中的数据。通过为每个表单元素的 value 属性赋空值，可以实现清空表单的效果。

<script>
   function clearForm() {
      document.getElementById("name").value = "";
      document.getElementById("email").value = "";
   }
</script>

<form>
   <label for="name">姓名：</label>
   <input type="text" id="name" name="name"><br><br>
   <label for="email">邮箱：</label>
   <input type="email" id="email" name="email"><br><br>
   <input type="submit" value="提交">
   <input type="button" value="清空" onclick="clearForm()">
</form>

在上述例子中，我们通过使用 JavaScript 的代码定义了一个 clearForm() 函数，该函数将两个输入框的 value 属性设置为空字符串，从而清空表单的内容。当用户点击清空按钮时，表单中的姓名和邮箱输入框将被清空。

方法四：利用表单重载

在 HTML5 中，我们还可以使用 form 的 reset() 方法来清空表单。该方法将重置表单中所有元素的值。

<form id="myForm">
   <label for="name">姓名：</label>
   <input type="text" id="name" name="name"><br><br>
   <label for="email">邮箱：</label>
   <input type="email" id="email" name="email"><br><br>
   <input type="submit" value="提交">
   <input type="button" value="重置" onclick="document.getElementById('myForm').reset();">
</form>

在上述示例中，我们为重置按钮调用了 form 的 reset() 方法，当按钮被点击时，表单中的所有输入框的值将被重置为空，从而实现表单清空的效果。

总结

本文介绍了四种清空 HTML 表单的方法。使用 JavaScript 的 reset() 函数是一种简单的方式，通过调用该函数可以清空表单内容。另外，我们还可以使用 HTML 的 reset 按钮、JavaScript 代码手动清空表单数据以及利用表单重载来实现表单的清空。根据实际需求，可以选择合适的方法来清空表单，使表单恢复到初始状态。在开发网页时，清空表单对于提高用户体验和操作便捷性非常重要。