HTML 阻止 HTML 表单提交的方法

在本文中，我们将介绍如何阻止 HTML 表单的提交。HTML 表单是网页开发中常用的一种交互方式，但有时我们希望在用户点击提交按钮后不进行实际的提交操作，而只是触发一些其他的操作或验证行为。以下是几种阻止 HTML 表单提交的方法。

阅读更多：HTML 教程

1. 使用 JavaScript 阻止提交

可以通过 JavaScript 来阻止 HTML 表单的提交。我们可以在表单元素的 onsubmit 事件中添加 JavaScript 代码来实现此功能。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>阻止HTML表单提交</title>
</head>
<body>
  <form onsubmit="return false;">
    <input type="text" name="username" placeholder="请输入用户名" required>
    <input type="password" name="password" placeholder="请输入密码" required>
    <button type="submit">提交</button>
  </form>
</body>
</html>

在这个示例中，我们通过在表单的 onsubmit 事件中添加 return false; 来阻止表单的提交。当用户点击提交按钮时，表单并不会进行实际的提交操作。

2. 使用 jQuery 阻止提交

如果你使用了 jQuery 库，可以使用它提供的方便的方法来阻止 HTML 表单的提交。通过使用 event.preventDefault() 方法，可以阻止默认的表单提交行为。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>阻止HTML表单提交</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    (document).ready(function(){("form").submit(function(event){
        event.preventDefault();
      });
    });
  </script>
</head>
<body>
  <form>
    <input type="text" name="username" placeholder="请输入用户名" required>
    <input type="password" name="password" placeholder="请输入密码" required>
    <button type="submit">提交</button>
  </form>
</body>
</html>

在这个示例中，我们使用了 jQuery 的 submit() 方法来监听表单的提交事件，并使用 event.preventDefault() 阻止了默认的表单提交行为。

3. 使用 CSS 隐藏提交按钮

还有一种简单的方法是使用 CSS 隐藏提交按钮，以达到阻止 HTML 表单提交的效果。通过给提交按钮添加 display: none; 样式，可以隐藏按钮并阻止用户点击。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>阻止HTML表单提交</title>
  <style>
    .hidden-button {
      display: none;
    }
  </style>
</head>
<body>
  <form>
    <input type="text" name="username" placeholder="请输入用户名" required>
    <input type="password" name="password" placeholder="请输入密码" required>
    <button type="submit" class="hidden-button">提交</button>
  </form>
</body>
</html>