如何在 HTML 表单中使用多个提交按钮?
通常，HTML 表单使用单个提交按钮，按下按钮时会保存记录。在某些情况下，我们需要一个包含其他提交按钮(例如"接受"或"拒绝")的表单。这些类型的按钮通常会在更新记录时尝试状态转换。
包含多个按钮的表单需要处理服务器端代码，需要知道按下了哪个按钮。通常，提交后，目标数据存储在 action 属性中，每个按钮都指向相同的位置。为了解决这个问题，我们使用 formaction 属性。每个提交按钮都需要一个不同的 [formaction] 属性。
formaction 属性指定数据发送的位置。提交表单后，将调用 formaction 属性并将数据发送到服务器。它会覆盖 <form> 元素的功能。
语法
Following is the usage of multiple submit buttons in a single 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>
步骤
使用 post 方法创建一个表单，值为您想要发送表单数据的默认 URL。
根据您的需求在表单中创建输入字段。
创建一个带有提交功能的按钮，该按钮将触发表单的默认 action 属性，并将输入数据发送到该 URL。
创建另一个带有提交功能的按钮，并为该按钮添加 formaction 属性，并将您想要在点击此按钮时发送数据的辅助 URL 的值赋值。
formaction 属性会覆盖表单的 action 属性，并将数据发送到所需位置。
示例
以下示例说明如何在单个表单中使用多个按钮 −
<!DOCTYPE html>
<html>
<title>
TutorialsPoint
</title>
<body>
<form action="https://www.cainiaomax.com/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://www.cainiaomax.com/index.htm "> HOME
</button>
<button type="submit"
formaction="https://www.cainiaomax.com/questions/index.php">Q/A
</button>
</form>
</body>
</html>
运行上述程序时，将显示一个包含两个输入字段和两个按钮的表单。当用户在按钮中输入详细信息时，它将被重定向到指定的 URL。
点击"主页"提交按钮时，它会导航到第一个 URL，即 https://www.cainiaomax.com/index.html。
点击"问答"提交按钮时，它会导航到第二个 URL，即 https://www.cainiaomax.com/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">
在上面的代码片段中，有三个提交按钮，它们的名称相同，但值不同，例如"选择"、"更新"和"删除"。每当用户点击"按钮"时，我们都需要比较它们的值来确定用户点击了哪个按钮。
每个按钮使用不同的名称提交按钮
每个按钮都可以使用不同的名称，但使用的输入字段类型仅限于提交。
示例
在下面的代码片段中，有两个选择按钮和一个删除按钮。根据点击的按钮，服务器端脚本语言只会提交一个按钮，即使名称不同。因此，两个选择按钮可以协同工作。
<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://www.cainiaomax.com/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。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
