📜  HTML | onreset 事件属性(1)

📅  最后修改于: 2023-12-03 14:41:52.243000             🧑  作者: Mango

HTML | onreset 事件属性

在 HTML 中,onreset 是一个事件属性,用于在重置表单时执行指定的 JavaScript 代码。

语法
<form onreset="JavaScriptCode">
  ...
</form>
参数
  • JavaScriptCode: 重置表单时要执行的 JavaScript 代码。
介绍

onreset 事件属性用于在用户点击重置按钮时触发。重置按钮可以将表单的所有字段值恢复为初始状态。

一般情况下,可以在 onreset 属性中指定一个 JavaScript 函数来处理表单重置事件。当用户点击重置按钮时,指定的函数将被调用。

示例

以下示例演示了如何在表单重置时触发 JavaScript 函数。

<!DOCTYPE html>
<html>
<head>
  <title>表单重置事件示例</title>
  <script>
    function resetForm() {
      console.log('表单已重置');
    }
  </script>
</head>
<body>
  <form onreset="resetForm()">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" value="John Doe" required><br><br>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" value="johndoe@example.com" required><br><br>
    <input type="reset" value="重置">
    <input type="submit" value="提交">
  </form>
</body>
</html>

在上面的示例中,定义了一个名为 resetForm 的 JavaScript 函数来处理表单重置事件。当用户点击重置按钮时,该函数将在控制台打印出一条消息:"表单已重置"。

结论

onreset 事件属性使得在用户重置表单时执行自定义的 JavaScript 代码成为可能。它为开发人员提供了一种在重置事件发生时进行需要的操作的方式。通过利用该属性,可以实现更好的用户体验和交互。