如何在 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