HTML 如何阻止中按钮提交表单

在本文中，我们将使用不同的方法来阻止按钮提交表单。有几个原因可以阻止按钮提交表单，例如，如果用户没有填写所有必需的表单字段，或者在表单中添加了不正确的详细信息等等。为此，我们可以实施不同的方法，如下所述。

方法1：禁用提交按钮

我们可以通过禁用提交按钮来阻止表单的提交。

语法：

<form>
     <button type="submit" disabled>Submit</button>
</form>

示例： 在下面的示例中，我们添加了disabled属性，这样它就无法点击，因此表单不会被提交。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Disable Submit Button</title> 
    <style> 
        form { 
            margin: 300px 500px; 
            display: flex; 
            flex-direction: column; 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <form> 
        <h1>GeeksforGeeks</h1> 
        <label for="name">Name:</label> 
        <input type="text" 
               id="name" 
               name="name" /> 
        <br /> 
        <label for="email">Email:</label> 
        <input type="email" 
               id="email" 
               name="email" /> 
        <br /> 
        <button type="submit" disabled> 
              Submit 
        </button> 
    </form> 
</body> 
  
</html>

输出：

HTML 如何阻止中按钮提交表单

方法2：使用event.preventDefault()方法： 您可以在JavaScript中的表单提交事件上调用event.preventDefault()方法来阻止表单提交。这个方法会停止默认的表单提交行为，您可以根据需求处理表单数据。

语法：

document.getElementById('submit-btn').addEventListener('click', 
    function(event) {

        // Handle the form data
        event.preventDefault();
});

示例: 在这个示例中，我们使用document.querySelector()获取表单元素，并使用addEventListener()为提交按钮添加事件监听器。在事件监听器函数中，我们调用了 event.preventDefault() 方法 来阻止按钮的默认行为，即提交表单。然后根据您的要求处理表单数据。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Disable Submit Button</title> 
    <style> 
        form { 
            margin: 300px 500px; 
            display: flex; 
            flex-direction: column; 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <form> 
        <h1>GeeksforGeeks</h1> 
        <label for="name">Name: 
          </label> 
        <input type="text" 
               id="name" 
               name="name" /> 
        <br /> 
        <label for="email">Email: 
          </label> 
        <input type="email"
               id="email" 
               name="email" /> 
        <br /> 
        <button type="submit" 
                id="submit-btn">Submit 
          </button> 
    </form> 
    
    <script> 
        const form = document.querySelector("form"); 
  
        // Prevent form submission on button click 
        document 
            .getElementById("submit-btn") 
            .addEventListener("click", function (event) { 
                event.preventDefault(); 
            }); 
    </script> 
</body> 
  
</html>

输出结果：

HTML 如何阻止中按钮提交表单