如何在 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>
输出
选择上方任何一个学科的单选按钮并点击提交。它不会提交 -
广告
数据结构
网络
关系型数据库管理系统
操作系统
Java
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP