HTML 单页面多表单或多提交

在本文中，我们将介绍HTML中如何在一个页面中使用多个表单以及如何进行多次提交。

阅读更多：HTML 教程

使用多个表单

在HTML中，可以在一个页面中使用多个表单，每个表单都可以有自己的输入字段和提交按钮。这样可以方便地将相关的输入字段和操作组织在一起。

下面是一个示例，展示了两个不同的表单：

<form id="form1">
  <label for="name1">姓名：</label>
  <input type="text" id="name1" name="name1"><br>
  <label for="email1">邮箱：</label>
  <input type="email" id="email1" name="email1"><br>
  <input type="submit" value="提交表单1">
</form>

<form id="form2">
  <label for="name2">姓名：</label>
  <input type="text" id="name2" name="name2"><br>
  <label for="email2">邮箱：</label>
  <input type="email" id="email2" name="email2"><br>
  <input type="submit" value="提交表单2">
</form>

在上述示例中，我们定义了两个表单，分别具有不同的id属性和名称属性。每个表单都包含了一些输入字段和一个提交按钮。用户可以在每个表单中输入相关的信息，并点击提交按钮进行表单提交。

多次提交表单

在普通的HTML中，每个表单的提交按钮只会触发相应表单的提交操作，而不会影响其他表单。这意味着用户可以在同一个页面上多次提交表单，每次提交对应的是不同的表单数据。

下面是一个示例，展示了表单提交时对应的处理函数：

<form id="form1" onsubmit="return submitForm1(event)">
  <label for="name1">姓名：</label>
  <input type="text" id="name1" name="name1"><br>
  <label for="email1">邮箱：</label>
  <input type="email" id="email1" name="email1"><br>
  <input type="submit" value="提交表单1">
</form>

<form id="form2" onsubmit="return submitForm2(event)">
  <label for="name2">姓名：</label>
  <input type="text" id="name2" name="name2"><br>
  <label for="email2">邮箱：</label>
  <input type="email" id="email2" name="email2"><br>
  <input type="submit" value="提交表单2">
</form>

<script>
  function submitForm1(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    // 处理表单1的提交操作
    // ...
    return false; // 阻止事件冒泡和默认行为
  }

  function submitForm2(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    // 处理表单2的提交操作
    // ...
    return false; // 阻止事件冒泡和默认行为
  }
</script>

在上述示例中，我们在每个表单中都定义了一个提交时的处理函数。这些处理函数会在对应表单的提交按钮点击后被触发，并可以执行相关的操作。这里我们使用了事件对象(event)的preventDefault()方法来阻止表单的默认提交行为，并使用return false来阻止事件的冒泡和默认行为。

通过以上示例，我们可以实现在一个页面中使用多个表单以及多次提交表单的功能。

总结

在本文中，我们介绍了如何在HTML中使用多个表单以及如何进行多次提交。我们可以在一个页面中使用多个表单来组织相关的输入字段和操作，每个表单都可以有自己的提交按钮和处理函数。用户可以在同一页面上多次提交不同的表单数据，实现对应的操作。HTML的这种特性为开发者提供了更大的灵活性和便利性，在设计复杂的交互页面时能够更好地满足需求。