HTML 在HTML表单中使用多个提交按钮 – 指定一个按钮为默认按钮

在本文中，我们将介绍如何在HTML表单中使用多个提交按钮，并将其中一个按钮指定为默认按钮。HTML表单是用于收集用户输入数据的重要工具，而提交按钮则是用户提交表单数据的主要方式。

阅读更多：HTML 教程

为什么需要多个提交按钮？

有时候，我们可能需要在一个表单中提供多个不同的操作选项，而每个操作都需要不同的处理方式。例如，在一个电子商务网站的注册表单中，我们可能需要提供“注册”和“取消”两个选项。在另一个场景中，我们可能需要一个“保存”按钮和一个“删除”按钮。

为了实现这样的需求，我们可以在HTML表单中使用多个提交按钮并为每个按钮指定不同的名称和值属性。接下来，我们将详细介绍如何实现这一点。

HTML表单中的多个提交按钮示例

下面是一个使用多个提交按钮的简单HTML表单示例：

<form action="process.php" method="post">
  ... 其他表单字段 ...
  <input type="submit" name="submit" value="保存">
  <input type="submit" name="submit" value="删除">
</form>

在上述示例中，我们使用了两个提交按钮，并为每个按钮指定了相同的名称（”submit”）和不同的值（”保存”和”删除”）。当用户点击其中一个按钮时，表单数据将被提交到”process.php”页面进行处理。

指定默认按钮

要指定一个默认的提交按钮，我们可以使用HTML的autofocus属性。这个属性可以将焦点自动设置在表单上的指定元素上。在本例中，我们可以将autofocus属性添加到默认按钮上，从而使它成为默认的聚焦按钮。

下面是一个示例，展示了如何将一个提交按钮指定为默认按钮：

<form action="process.php" method="post">
  ... 其他表单字段 ...
  <input type="submit" name="submit" value="保存" autofocus>
  <input type="submit" name="submit" value="删除">
</form>

在上述示例中，我们为”保存”按钮添加了autofocus属性。这意味着当用户打开表单页面时，焦点将自动设置在”保存”按钮上，用户可以直接按下回车键或空格键进行提交。

处理多个提交按钮的表单数据

在我们的示例中，我们为两个提交按钮使用了相同的名称，这意味着无论用户点击哪个按钮，提交到服务器的表单数据的名称都将是相同的。

为了区分用户点击了哪个按钮，我们可以在服务端的处理代码中检查提交的值。根据提交的值的不同，我们可以执行不同的操作。

下面是一个使用PHP处理多个提交按钮的示例代码：

if(isset( $_POST['submit'])) {$ submitValue =  $_POST['submit']; if($ submitValue == "保存") {
    // 执行保存操作
  } elseif($submitValue == "删除") {
    // 执行删除操作
  } else {
    // 未知按钮
  }
}

在上述示例中，我们首先检查表单数据中是否存在名为”submit”的值。然后，我们将这个值存储在变量$submitValue中，并根据不同的值执行相应的操作。