資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 表單中使用多個提交按鈕？
通常，HTML 中的表單使用單個提交按鈕，當按下按鈕時儲存記錄。在某些情況下，我們需要一個帶有其他提交按鈕（例如“接受”或“拒絕”）的表單。這些型別的按鈕通常在更新記錄的同時嘗試狀態轉換。
具有多個按鈕的表單必須處理您的伺服器端程式碼，需要知道按下了哪個按鈕。通常，提交後，目標資料儲存在 action 屬性中，每個按鈕都指向相同的位置。為了克服這個問題，我們使用 **formaction** 屬性。對於每個提交按鈕，我們需要一個不同的 [formaction] 屬性。
**formaction** 屬性指定將資料傳送到哪裡。提交表單後，將呼叫 **formaction** 屬性並將資料傳送到伺服器。它覆蓋了 **<form>** 元素的功能。
語法
以下是單個表單中使用多個提交按鈕的用法 -
<form action="URL" method="post"> <!-- Input fields here --> <button type="submit">BUTTON 1</button> <!-- This button post to custom URL of the formaction attribute--> <button type="submit" formaction="URL2"> BUTTON 2 </button> </form>
步驟
使用 method 為 'post' 並將值設定為要傳送表單資料的預設 URL 建立表單。
根據您的需求在表單內部建立輸入欄位。
建立一個帶有 submit 屬性的按鈕，它觸發表單的預設 action 屬性並將輸入資料傳送到該 URL。
建立一個帶有 submit 屬性的另一個按鈕，並向該按鈕新增 'formaction' 屬性，併為其提供您希望在單擊此按鈕時傳送資料的輔助 URL 的值。
**formaction** 屬性覆蓋表單的 action 屬性並將資料傳送到所需位置。
示例
以下示例說明如何在單個表單中使用多個按鈕 -
<!DOCTYPE html>
<html>
<title>
TutorialsPoint
</title>
<body>
<form action="https://tutorialspoint.tw/index.html" method="post">
Username:<br>
<input type="text" name="username"><br>
Email id:<br>
<input type="text" name="password"><br><br>
<button type="submit"
formaction=" https://tutorialspoint.tw/index.htm "> HOME
</button>
<button type="submit"
formaction="https://tutorialspoint.tw/questions/index.php">Q/A
</button>
</form>
</body>
</html>
當我們執行上述程式時，將顯示一個包含兩個輸入欄位和兩個按鈕的表單。當用戶在按鈕中輸入詳細資訊時，它將重定向到指定的 URL。
當您單擊“主頁”提交按鈕時，它會導航到第一個 URL，即 https://tutorialspoint.tw/index.html。
當您單擊“問答”提交按鈕時，它會導航到第二個 URL，即 https://tutorialspoint.tw/questions/index.php
具有相同名稱和不同文字的提交按鈕
按鈕具有相同的名稱，意味著輸入欄位中的“name”屬性對於程式中的所有按鈕都相同，並且按鈕的值不同。
語法
以下是建立具有相同名稱和不同文字的按鈕的語法。
<input type="submit" name=" button" value="Select"> <input type="submit" name=" button" value="Update"> <input type="submit" name=" button" value="Delete">
在上面的程式碼段中，有三個提交按鈕具有相同的名稱“button”，但具有不同的值，例如“選擇”、“更新”和“刪除”標籤。每當使用者單擊“button”時，我們必須比較值以找出單擊了哪個按鈕。
每個按鈕使用不同名稱的提交按鈕
對於每個按鈕，我們可以表示不同的名稱，但使用的輸入欄位型別僅用於提交。
示例
在以下程式碼段中，有兩個選擇按鈕和一個刪除按鈕。根據單擊哪個按鈕，伺服器端指令碼語言只提交一個事件，即使存在不同的名稱。因此，兩個選擇按鈕一起工作。
<input type="submit" name=" select_button1" value="Select1"> <input type="submit" name="select_button2" value="Select2"> <input type="submit" name="delete_button" value="Delete">
使用 Formaction 屬性的提交按鈕
**formaction** 屬性用於覆蓋表單中的 action 屬性。它有助於將提交發送到不同的位置。
示例
以下程式碼段使用 **formaction** 屬性建立 3 個提交按鈕 -
<button type="submit" name="action" formaction="/select1">Select</button> <button type="submit" name="action" formaction="/select2">Select</button> <button type="submit" name="action" formaction="/update">Update</button>
如果我們單擊第一個選擇按鈕，它會將表單提交到 /select1 URL。如果我們單擊第二個選擇，它會將表單提交到 /select2 URL。提交後，伺服器端指令碼語言導航到選定的 URL。
示例
考慮另一個示例，說明如何在單個表單中使用多個按鈕 -
<html>
<head>
<title>multiple submit button</title>
</head>
<body>
<div>
<form action="https://tutorialspoint.tw/index.html" method="post">
<button type="submit" id="postback1" name="cmd" value="Save" >Save</button>
<button type="submit" id="postback2" name="cmd" value="Update">Update</button>
<button type="submit" id="postback3" name="cmd" value="Delete">Delete</button>
</form>
</div>
</body>
</html>
當我們執行上述程式時，將顯示一個包含三個按鈕的表單，這些按鈕分別標記為“儲存”、“更新”和“刪除”。當用戶單擊按鈕時，它將根據您單擊的按鈕重定向到相應的 URL。
11K+ 次瀏覽
