让表单恢复初始数据，轻松搞定！

2022-11-17 20:51:05

表单恢复初始数据：实用指南

导言

在Web开发中，经常需要在提交或验证失败后重置表单。本文将介绍四种在HTML、JavaScript、jQuery和CSS中重置表单的有效方法。

1. HTML重置按钮

最简单的方法是使用HTML重置按钮。其语法如下：

<input type="reset" value="重置">

当用户点击该按钮时，浏览器将表单重置为初始状态。

代码示例：

<form>
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

2. JavaScript重置函数

使用JavaScript，可以编写一个函数来重置表单。函数如下：

function resetForm() {
  document.getElementById("form").reset();
}

调用resetForm()函数即可重置表单。

代码示例：

<form id="form">
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="submit" value="提交">
</form>

<script>
  function resetForm() {
    document.getElementById("form").reset();
  }
</script>

3. jQuery重置方法

jQuery提供了一个更简洁的方法来重置表单：

$("form").reset();

代码示例：

<form>
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="submit" value="提交">
</form>

<script>
  $("form").reset();
</script>