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

htmlweb developmentfront end technology更新于 2024/6/10 2:52:17

为了阻止表单提交，我们可以使用 onsubmit 属性。我们也可以使用 event.preventDefault() 方法 -

使用 onsubmit 属性阻止按钮提交表单
使用 event.preventDefault() 阻止按钮提交表单

使用 onsubmit 属性阻止按钮提交表单

我们可以使用 onsubmit 属性阻止表单提交，如下所示 -

<form onsubmit="return false;">

我们在上面的 <form> 标签中返回 false 来阻止表单提交。

示例

让我们看一个完整的示例 -


<!doctype html>
<html lang="en">
<body>
   <h1>Details</h1>
   <form onsubmit="return false;">
      <p>Select your preferred subject:</p>
      <div>
         <input type="radio" id="maths" name="subject" value="maths">
         <label for="maths">Maths</label>
         <input type="radio" id="science" name="subject" value="science">
         <label for="science">Science</label>
         <input type="radio" id="english" name="subject" value="english">
         <label for="english">English</label>
      </div><br>
      <div>
         <button id="submit" type="submit">Submit</button>
      </div>
   </form>
</body>
</html>

输出

选择上方任意"主题"单选按钮，然后点击"提交"。该按钮将不会提交 -

使用 event.preventDefault() 阻止按钮提交表单

我们可以使用 event.preventDefault() 方法阻止表单提交 -

<form onsubmit="event.preventDefault();">

示例

现在让我们看看完整的例子 -


<!doctype html>
<html lang="en">
<body>
   <h1>Details</h1>
   <form onsubmit="event.preventDefault();">
      <p>Select your preferred subject:</p>
      <div>
         <input type="radio" id="maths" name="subject" value="maths">
         <label for="maths">Maths</label>
         <input type="radio" id="science" name="subject" value="science">
         <label for="science">Science</label>
         <input type="radio" id="english" name="subject" value="english">
         <label for="english">English</label>
      </div><br>
      <div>
         <button id="submit" type="submit">Submit</button>
      </div>
   </form>
</body>
</html>