如何使用表单外的提交按钮提交表单 - Html

在 HTML 表单中，有一个默认的提交按钮，也可以自定义提交按钮并将其放置在表单内部。但是，有时候我们需要将提交按钮放置在表单之外，这时候该怎么做呢？

我们可以使用 JavaScript 中的 submit() 方法来实现。当我们点击表单外的提交按钮时，可以使用 submit() 方法将表单提交。

下面是一个示例代码：

<form id="myForm" action="submit.php" method="post">
  <input type="text" name="username"><br>
  <input type="password" name="password"><br>
</form>

<button onclick="document.getElementById('myForm').submit()">提交</button>

这里，我们定义了一个 ID 为 myForm 的表单，并将其 action 属性设为 submit.php，method 属性设为 post。然后，我们在表单外部定义了一个按钮，并将其 onclick 属性设为 document.getElementById('myForm').submit()。

当我们点击这个按钮时，submit() 方法会将表单提交到 submit.php 页面。

注意，这种方法有一个缺点，即无法将提交按钮的值传递给后端。如果需要将按钮的值传递给后端，可以使用隐藏输入框来实现。例如：

<form id="myForm" action="submit.php" method="post">
  <input type="text" name="username"><br>
  <input type="password" name="password"><br>
  <input type="hidden" name="submitType" value="outsideButton">
</form>

<button onclick="document.getElementById('myForm').submit()">提交</button>

在表单中新增一个隐藏的输入框，将其 name 设为 submitType，value 设为我们希望表达的值（例如 outsideButton）。这样，在提交表单时，我们就能够获取这个值并传递给后端了。

以上就是如何使用表单外的提交按钮提交表单的方法。