在不使用<form>标签内的按钮提交表单

Question

假设我有:

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

<input type="submit" />

怎样使用在表单外的提交按钮进行表单提交？我知道在HTML5中有一个action属性可以用来提交，但不确定它是否完全跨浏览器兼容。如果不兼容，是否有其他方法实现此功能？

- daryl

---

我认为没有 JavaScript 是做不到的。浏览器怎么知道这是哪个表单？可能有好几个。为什么不能把提交按钮放在表单里面呢？ - Keith

如果您不想使用JS，那么在HTML(<5)中似乎不可能实现。只是出于好奇，为什么您会在代码中有这样的安排呢？ - Kumar

我有一个带有多个选项卡的设置区域，并且有一个更新所有选项的按钮，由于其设计，该按钮将位于表单之外。我将采用HTML5选项或JS解决方案，因为这个问题似乎是多余的。 - daryl

@Kumar，我也认为这是不可能的，但看起来并非如此 https://dev59.com/fmw05IYBdhLWcg3wy052#23456905 - dav

现在的答案是 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attr-form - caub

Answer 1

在HTML5中，有表单属性。基本上

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

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

- Lie Ryan

---

对于计划使用它的任何人来说，这在IE上不起作用。我曾经使用过它，但后来决定添加提交事件函数回调以手动提交IE浏览器上的表单。 - racl101

我作为一种优雅的备选方案进行了这个操作：<button type="submit" form="frmFoo" onclick="!this.form&&$('#'+$(this).attr('form')).submit()"> 经过实验发现，this.form指向附加的表单DomElement，否则为null。// 编辑：使用jQuery，当然也可以使用vanilla。 - Adrian Föder

如果您想在MS Edge中查看表单属性，请在此处投票：https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/7327649-add-support-for-the-form-attribute - mkurz

由于这是一个高曝光率页面上的高曝光率答案，而且有愚蠢的“最小6个字符”编辑限制：你能否修复INPUT标签，使其不再是自闭合的？（这是我未成功编辑尝试的更改摘要：“为非XHTML（但HTML5）INPUT修正无效的自闭合标签语法，它是一个空元素（因此不能关闭）。”）谢谢！ - Sz.

一个 @AdrianFöder 回退的纯 JavaScript 版本是：<button type="submit" form="frmFoo" onclick="!this.form && document.getElementById('myform').submit()">。 - romaricdrigon

Answer 2

对我非常有效的一个解决方案在这里还没有提到。它需要在 <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" tabindex="0">Submit</label>

现在，通过单击元素，您可以使用此链接单击

元素的“提交”按钮。

- Offereins

---

我认为更好的解决方案是不需要使用RequireJS并且不需要进行大的修改 :) - Anton Hasan

也适用于IE 11。我知道，你很少看到“适用”和“IE”出现在同一句话中。 - shim

更好的解决方案，没有任何不兼容性。如果使用Twitter Bootstrap，您只需使用“btn btn-primary”作为标签CSS类即可完美运作。 - Juanda

非常好的解决方案，但是使用这种方法可能会有一个异议。据我所知，“标签(label)”不是一个可聚焦的元素，因此对于只使用键盘进行导航的用户来说，导航到“按钮(button)”，然后按空格键激活该按钮并不直观。(我知道你可以按"<enter>"键代替，但这并不是人们惯用键盘导航表单的唯一方式) - Auke

为了让标签能够通过Tab键聚焦，您可以使用HTML属性tabindex：<label for="submit-form" tabindex="0">提交</label>。参考这个问题。 - MarthyM

Answer 3

更新：在现代浏览器中，您可以使用form属性来实现这一点。

---

据我所知，没有使用javascript是无法实现这个的。

下面是规范的内容：

用于创建控件的元素通常出现在FORM元素内部，但是当它们用于构建用户界面时，也可以出现在FORM元素声明之外。这在内固有事件的部分中进行了讨论。请注意，在表单之外的控件不能成为成功的控件。

这是我加粗的部分

submit按钮被视为控件。

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

从评论中看到：

我有一个多标签设置区域，其中有一个按钮可以更新所有内容，由于设计原因，该按钮将位于表单之外。

为什么不把放在表单内，然后使用CSS将其放置在页面其他位置呢？

- Jason Gennaro

---

FYI，HTML5支持还不完美，但正在逐渐完善中：http://www.impressivewebs.com/html5-form-attribute/ - Shackrock

抱歉我来晚了，但您如何将输入放在表单中，却将其定位到其他位置呢？ - cgf

答案已经失效了，因为松鼠乔的答案在2016年之后有效。 - Peter

JavaScript解决方案有一些问题。例如，在最新的Chrome浏览器中，HTML5验证（必填等）会被跳过。我的一个解决方案是使用两个提交按钮，其中一个是隐藏的。点击应该在隐藏按钮上触发。没有经过适当验证的表单不应该被提交。 - victor n.

就在这条评论之后，我发现form.checkValidity()和form.reportValidity()在Edge浏览器中不受支持 : ) - victor n.

Answer 4

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

</form>

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

这对我有用，可以为表单添加远程提交按钮。

- Joe the Squirrel

---

谢谢你，对于这个简单的功能，我不想写一堆 JS 代码。附注：我的应用程序不需要支持 IE。 - Thamilan S

如果您想在MS Edge中看到表单属性功能，请在此处投票：https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/7327649-add-support-for-the-form-attribute - mkurz

Answer 5

如果您可以使用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 提交表单。希望这能有所帮助。

- dav

---

为了让它在支持HTML5的浏览器和IE上都能正常工作，这是我的jQuery代码：$('button[form]').click(function (){ var formId = $(this).attr('form'); $('#' + formId).submit(); }); - Snook

Answer 6

与另一个解决方案类似，稍作修改：

<form method="METHOD" id="FORMID">
   <!-- ...your inputs -->
</form>
<button type="submit" form="FORMID" value="Submit">Submit</button>

https://www.w3schools.com/tags/att_form.asp

- mster

---

这是我认为最好的答案。直接从 MDN 上了解到按钮的 form 属性：与按钮相关联的表单元素（其表单所有者）。该属性的值必须是同一文档中 <form> 元素的 id 属性。如果未指定此属性，则 <button> 元素将与祖先 <form> 元素相关联（如果存在）。此属性使您能够将 <button> 元素与文档中任何位置的 <form> 元素相关联，而不仅仅是作为 <form> 元素的后代。 - AlexSashaRegan

请注意：这在Internet Explorer 11中不起作用。在此处尝试：https://cdpn.io/mdix/debug/PooPqaM/PNAvYKNJojRr - Marc Dix

Answer 7

您可以通过在组件定义中添加form="yourFormId"来告诉表单，来自<form>标记外部组件属于它。

在这种情况下，

<form id="login-form">
... blah...
</form>

<button type="submit" form="login-form" name="login_user" class="login-form-btn">
        <B>Log In</B>
</button>

即使按钮位于 <form> 标签之外，只要您将表单名称分配给它，表单仍会愉快地提交。表单认为按钮是其一部分，并且不需要使用JavaScript来提交表单（这可能存在漏洞，例如表单可能会提交但Bootstrap错误/验证未能显示，我已进行测试）。

- GeoSn0w

---

暂时，这应该是有效的答案。 - arpitansu

问题在于默认事件中没有表单值。 - mim

也可以将其作为按钮与<input type="submit">一起使用。 - Marco Floriano

对于像我这样的新手，请不要忘记添加 type="submit"。 - Greko2015 GuFn

@Greko2015GuFn 它已经在 <button type="submit"> 声明中了。 - GeoSn0w

Answer 8

试一下这个：

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

虽然我建议给表单添加一个id，然后通过该id来访问，而不是使用document.forms[index]。

- Mrchief

---

是的，我知道如何使用JavaScript实现它，但如果你看一下，我没有将它标记为JavaScript。 - daryl

很抱歉，从您的帖子中并不清楚您正在寻找非 JS 的方法（我以为您忘记将其标记为 JS）。 - Mrchief

如果您想使用另一个表单中的按钮提交外部表单，那么这是最好的方法。 - Vahid Amiri

Answer 9

你总是可以使用jQuery：

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

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

- Aravind Suresh Thakidayil

Answer 10

这是一个相当不错的解决方案，它结合了迄今为止最好的想法，并包含了我对Offerein所强调问题的解决方案。没有使用任何javascript。

如果你关心与IE（甚至Edge 13）的向后兼容性，就不能使用form="your-form"属性。

使用一个标准的提交输入并将其显示设置为none，然后在表单外添加一个标签：

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

请注意使用 display: none;。 这是有意的。使用Bootstrap的.hidden类会与jQuery的.show()和.hide()冲突，并且在Bootstrap 4中已被弃用。

现在只需添加一个为您的提交添加标签（为Bootstrap设计）：

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

与其他解决方案不同，我还使用了tabindex - 设为0 - 这意味着我们现在与键盘切换兼容。添加role="button"属性使其具有CSS样式cursor:pointer。Et voila。（看看这个小例子）。

- Jonathan

---

不错！在IE11和Firefox上都很好用。谢谢！ - eaglei22

@eaglei22 很高兴听到这个好消息 :) - Jonathan

把其他地方的所有功能/建议整合在一起对你非常有帮助，所以谢谢你。然而，即使现在你可以通过制表符到达按钮/标签，我仍然看不到任何用键盘“点击”它的方法，例如按Enter没有任何效果。因此，能够制表符到达它似乎有点毫无意义。有没有一种不使用JavaScript的方法来实现这一点？ - Andrew Willems

@AndrewWillems 那是一个很好的观点。不幸的是，我没有看到在没有 JavaScript 的情况下触发点击事件的方法。PS：如果这篇文章对您有帮助，请投票支持。它不会花费您任何东西，但对于那些提供有用答案的人来说意义重大。 - Jonathan

我也很感谢你修复了那些懒散和无效的<input... />自闭合语法，几乎每个人都在这里（也）明显且不正确地使用它，改为使用正确的无关闭标签！ :) 赞！ - Sz.

哎呀，看起来同时发生了变化：对于HTML5.2，空void元素的自闭合语法现在是有效的。 - Sz.