使用<form> 之外的按钮提交表单标签

问题描述

说我有：

<form method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" />

如何在表单之外的提交按钮上提交该表单，我认为 HTML5 中的这个提交的动作属性，但我不知道如果这是完全 cross-browser，如果不是有这样做？

最佳解决方案

据我所知，如果没有 javascript，你不能这样做。

这是规范说的

The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.

这是我的大胆

submit 按钮被认为是一个控件。

http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1

从评论

I have a multi tabbed settings area with a button to update all, due to the design of it the button would be outside of the form.

为什么不将 input 放在表单中，但是使用 CSS 将其放在页面的其他位置？

次佳解决方案

在 HTML5 中，有 the form attribute 。基本上

<form id="myform" method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" />

第三种解决方案

一个对我来说非常棒的解决方案，在这里仍然是错误的。它需要在<form> 中有一个视觉上隐藏的<submit> 或<input type="submit"> 元素，以及相关的<label> 元素。看起来像这样：

<form method="get" action="something.php">
     <input type="text" name="name" />
     <input type="submit" id="submit-form" class="hidden" />
</form>

<label for="submit-form">Submit</label>

现在这个链接使您能够通过单击<label> 元素’click’ 形式<submit> 元素。

第四种方案

如果可以使用 jQuery，可以使用这个

<form method="get" action="something.php" id="myForm">
    <input type="text" name="name" />

    <input type="submit" style="display:none" />
</form>

<input type="button" value="Submit" id="myButton" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#myButton").click(function() {
           $("#myForm").submit();
       });
    });
</script>

所以，底线是创建一个像 Submit 这样的按钮，并将真实的提交按钮放在窗体中 (当然是隐藏它)，并通过点击’Fake Submit’ 按钮通过 jquery 提交表单。希望它有帮助。

第五种方案

<form method="get" id="form1" action="something.php">

</form>

<!-- External button-->
<button type="submit" form="form1">Click me!</button>

这对我来说有用，有一个表单的远程提交按钮。

第六种方案

尝试这个：

<input type="submit" onclick="document.forms[0].submit();" />

虽然我建议在窗体中添加一个 id，而不是 document.forms[index]。

第七种方案

你可以随时使用 jQuery：

<form id="myForm">
  <!-- form controls -->
</form>
<input type="submit" id="myButton">

<script>
$(document).ready(function () {
  $("#myButton").click(function () {
    $("#myForm").submit();
  });
});
</script>

第八种方案

这是一个非常可靠的解决方案，其中包含了最好的想法，包括我的解决方案，突出强调与 Offerein 的问题。没有使用 JavaScript 。

如果您关心与 IE(甚至 Edge 13) 的向后兼容性，则不能使用 form="your-form" attribute 。

使用标准的提交输入显示无，并在表单之外添加标签：

<form id="your-form">
  <input type="submit" id="your-form-submit" style="display: none;">
</form>

注意使用 display: none; 。这是有意的。使用引导程序的.hidden 类与 jQuery 的.show()和.hide()冲突，并在 Bootstrap 4 中被废弃。

现在只需为您的提交添加一个标签 (以引导为样式)：

<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0">
  Submit
</label>

与其他解决方案不同，我也使用 tabindex – 设置为 0 – 这意味着我们现在与键盘标签兼容。添加 role="button"属性给它 CSS 样式 cursor: pointer 。 Et 瞧。 (See this fiddle) 。

参考文献

Submit form using a button outside the <form> tag

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

使用<form> 之外的按钮提交表单标签