表单外的提交按钮

前几天我遇到了一个非常奇怪的情况，我们在特定部分内有一个表单，但提交按钮却在底部。

起初，我尝试重新配置 HTML，让按钮成为表单元素的一部分。然而，这很快就变成了一堆乱七八糟的 HTML 代码。

因此，我决定研究其他选项并了解到（经过多年的开发）您可以将提交按钮放在表单之外！

让我们看一下。

表单外的提交按钮

为了实现这一点，我们应该使用以下标记。

<form id="newsletterForm">
  <label for="email">Email:</label>
  <input type="email" name="email" placeholder="Email" />
</form>

<button type="submit" form="newsletterForm">Submit!</button>

正如您所见，按钮不是表单的一部分，但它可以起作用。

这是因为我们form在按钮上使用了属性。在其中，我们定义了此按钮属于哪个表单。

您也可以在此 CodePen中尝试一下。

注意：您将看到“未找到”页面，因为我们的表单没有任何内容。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。