正文

如何轻松设置JavaScript重置按钮，实现表单内容一键恢复

/0 浏览量
0413

在网页开发中，表单是收集用户输入信息的重要工具。而重置按钮则允许用户轻松清除表单中的所有输入。下面，我将详细讲解如何使用JavaScript轻松设置重置按钮，并实现表单内容的一键恢复。

1. HTML结构

首先，我们需要一个简单的HTML表单，其中包含一些输入字段和一个重置按钮。以下是一个示例：

<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>
  <button type="button" id="resetBtn">重置</button>
</form>

2. CSS样式

为了使重置按钮更加美观，我们可以添加一些CSS样式。以下是一个简单的示例：

button {
  padding: 10px 20px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #d32f2f;
}

3. JavaScript实现

接下来，我们需要编写JavaScript代码来处理重置按钮的点击事件，并清除表单中的所有输入。

document.getElementById('resetBtn').addEventListener('click', function() {
  document.getElementById('myForm').reset();
});

这段代码通过监听重置按钮的点击事件，并调用表单的reset()方法来实现表单内容的一键恢复。

4. 完整示例

以下是完整的HTML、CSS和JavaScript代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JavaScript重置按钮示例</title>
  <style>
    button {
      padding: 10px 20px;
      background-color: #f44336;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    button:hover {
      background-color: #d32f2f;
    }
  </style>
</head>
<body>
  <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>
    <button type="button" id="resetBtn">重置</button>
  </form>

  <script>
    document.getElementById('resetBtn').addEventListener('click', function() {
      document.getElementById('myForm').reset();
    });
  </script>
</body>
</html>

通过以上步骤，您已经成功设置了一个JavaScript重置按钮，并实现了表单内容的一键恢复。希望这个示例能够帮助您更好地理解和应用JavaScript重置按钮。

-- 展开阅读全文 --