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


要防止表单提交,我们可以使用 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>

输出

选择上方任何一个学科的单选按钮并点击提交。它不会提交 -

更新时间:2022 年 10 月 25 日

3 千 + 次浏览

开启你的 职业

通过完成课程获得认证

开始
广告
© . All rights reserved.