HTML 如何用一个按钮清空表单并重置页面

在本文中，我们将介绍如何使用一个按钮来清空表单并重置页面。在开发网页应用程序时，用户通常需要清空表单中的输入内容并重置页面以便重新开始输入。HTML 提供了一种简单的方法来实现这个功能。

阅读更多：HTML 教程

表单重置功能

表单元素是 HTML 提供的一种用于收集用户输入数据的机制。表单通常包含输入字段（文本框、复选框、单选框等）和提交按钮。当用户点击提交按钮时，表单会将输入数据发送到服务器进行处理。

如果我们想要在页面加载时或通过点击按钮的方式清空表单，并重置页面以便重新开始输入，可以使用表单元素的 reset() 方法。

reset() 方法

reset() 方法是表单元素的一个内置方法，用于将表单的所有字段重置为初始值。当我们调用表单元素的 reset() 方法时，所有输入字段的值将被重置为其默认值。

下面是一个使用 reset() 方法清空表单的示例：

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="age">年龄：</label>
  <input type="text" id="age" name="age"><br><br>
  <input type="button" value="重置表单" onclick="document.getElementById('myForm').reset()">
</form>

在上面的示例中，我们使用了一个按钮来触发 reset() 方法。当按钮被点击时，表单中的姓名和年龄字段都会被重置为初始值，即为空。

重置页面

除了清空表单，有时还需要重置整个页面以便重新开始输入。在 HTML 中，我们可以使用 JavaScript 的 location 对象来实现页面的重置。

location.reload() 方法

location.reload() 方法用于重新加载当前页面。当我们调用 location.reload() 方法时，页面将重新加载，且输入字段的值将被重置为初始值。这种方法可以实现将页面重置为初始状态的效果。

下面是一个使用 location.reload() 方法重置页面的示例：

<input type="button" value="重置页面" onclick="location.reload()">

在上面的示例中，当按钮被点击时，页面将重新加载，输入字段的值将被重置为初始值。

清空表单并重置页面

如果我们想要同时清空表单并重置页面，只需要将清空表单的代码和重置页面的代码结合起来即可。

下面是一个同时清空表单并重置页面的示例：

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="age">年龄：</label>
  <input type="text" id="age" name="age"><br><br>
  <input type="button" value="清空并重置" onclick="document.getElementById('myForm').reset(); location.reload()">
</form>

在上面的示例中，我们在按钮的 onclick 事件中同时调用了表单的 reset() 方法和 location.reload() 方法。当按钮被点击时，表单中的输入字段会被清空，并且页面会重新加载，达到表单和页面重置的效果。