如何在 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 属性并将数据发送到所需位置。

示例

以下示例说明如何在单个表单中使用多个按钮 -

Open Compiler
<!DOCTYPE html>
<html>
<title>
   TutorialsPoint
</title>
<body>
   <form action="https://tutorialspoint.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://tutorialspoint.com/index.htm "> HOME
      </button>
      <button type="submit" 
         formaction="https://tutorialspoint.com/questions/index.php">Q/A
      </button>
   </form>
</body>
</html>

当我们运行上述程序时，将显示一个包含两个输入字段和两个按钮的表单。当用户在按钮中输入详细信息时，它将重定向到指定的 URL。

当您单击“主页”提交按钮时，它会导航到第一个 URL，即 https://tutorialspoint.com/index.html。

当您单击“问答”提交按钮时，它会导航到第二个 URL，即 https://tutorialspoint.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">

在上面的代码段中，有三个提交按钮具有相同的名称“button”，但具有不同的值，例如“选择”、“更新”和“删除”标签。每当用户单击“button”时，我们必须比较值以找出单击了哪个按钮。

每个按钮使用不同名称的提交按钮

对于每个按钮，我们可以表示不同的名称，但使用的输入字段类型仅用于提交。

示例

在以下代码段中，有两个选择按钮和一个删除按钮。根据单击哪个按钮，服务器端脚本语言只提交一个事件，即使存在不同的名称。因此，两个选择按钮一起工作。

Open Compiler
<input type="submit" name=" select_button1" value="Select1">
<input type="submit" name="select_button2" value="Select2">
<input type="submit" name="delete_button" value="Delete">

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

使用 Formaction 属性的提交按钮

**formaction** 属性用于覆盖表单中的 action 属性。它有助于将提交发送到不同的位置。

示例

以下代码段使用 **formaction** 属性创建 3 个提交按钮 -

Open Compiler
<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。

示例

考虑另一个示例，说明如何在单个表单中使用多个按钮 -

Open Compiler
<html>
<head>
   <title>multiple submit button</title>
</head>
<body>
   <div>
      <form action="https://tutorialspoint.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。

更新于: 2023年10月4日

11K+ 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告