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