以不同的表单操作提交多个表单 - HTML

在 HTML 中，我们可以创建多个表单来收集不同的数据。但是，如果我们想在一个页面中同时提交多个表单，该怎么做呢？

本文将介绍两种方法来在同一个页面中提交多个表单。

方法一：使用 HTML5 的 form 属性

在 HTML5 中，可以使用 form 属性来关联表单和按钮。

以下是一个例子：

<form id="form1">
  <input type="text" name="name1">
  <button type="submit" form="form1">提交表单1</button>
</form>

<form id="form2">
  <input type="text" name="name2">
  <button type="submit" form="form2">提交表单2</button>
</form>

在这个例子中，我们创建了两个表单，每个表单都有一个提交按钮。我们使用 form 属性来将每个按钮与相应的表单关联起来。当点击提交按钮时，表单将被提交。

这种方法的优点是简单易用，不需要编写 JavaScript 代码。

但是，这种方法的缺点是，每个表单都需要一个独立的提交按钮，这可能会导致页面上有太多的按钮。并且，由于每个表单都需要有一个唯一的 ID，因此在创建表单时需要小心，以避免 ID 冲突。

方法二：使用 JavaScript

另一种方法是使用 JavaScript 来处理表单提交。

以下是一个例子：

<form id="form1">
  <input type="text" name="name1">
  <button type="button" onclick="submitForm('form1')">提交表单1</button>
</form>

<form id="form2">
  <input type="text" name="name2">
  <button type="button" onclick="submitForm('form2')">提交表单2</button>
</form>

<script>
  function submitForm(formId) {
    var form = document.getElementById(formId);
    form.submit();
  }
</script>

在这个例子中，我们创建了两个表单，每个表单都有一个提交按钮。我们使用 JavaScript 来为每个按钮添加 onclick 事件处理程序。当按钮被点击时，JavaScript 函数 submitForm 将被调用。

submitForm 函数接受一个表单 ID 作为参数。它使用 JavaScript DOM 方法来获取表单对象，并调用表单的 submit 方法来提交表单。

这种方法的优点是可以更灵活地控制表单的行为。例如，您可以编写更复杂的 JavaScript 函数来验证表单数据，或者使用 Ajax 技术将表单提交到服务器而不是重新加载整个页面。

然而，这种方法需要编写更多的 JavaScript 代码，并且需要小心处理表单提交事件以避免表单数据被意外提交。

结论

以上是在 HTML 中提交多个表单的两种方法。您可以选择一个最适合您的需求。如果您只需要一个简单的解决方案，可以使用 HTML5 的 form 属性。如果您需要更灵活的控制，可以使用 JavaScript。