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

Posted 2023-02-22

【中文标题】使用 <form> 标签外的按钮提交表单

【英文标题】：Submit form using a button outside the <form> tag

【发布时间】：2011-10-24 15:22:49

【问题描述】：

说我有：

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

<input type="submit" />

如何在表单外使用提交按钮提交该表单，我认为在 html5 中有一个用于提交的操作属性，但我不确定这是否完全跨浏览器，如果不是有什么办法吗？

【问题讨论】：

我认为没有 javascript 就无法做到这一点。浏览器如何知道它是什么形式？可能有几个。为什么不能把提交按钮放在表单里面？

如果你不想使用 JS，那么在我看来，在 html(

我有一个多选项卡设置区域，带有一个按钮来更新所有内容，由于它的设计，该按钮将位于表单之外。我只是打算使用 HTML5 选项或 JS 解决方案，因为这个问题似乎是多余的。

@Kumar，我也觉得不可能，但是貌似不是***.com/a/23456905/932473

现在的答案是developer.mozilla.org/en-US/docs/Web/HTML/Element/…

【参考方案1】：

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

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

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

【讨论】：

这对任何打算使用它的人都不起作用。我用过但后来决定添加提交事件函数回调在IE浏览器上手动提交表单。

究竟是哪个 IE 版本？

我这样做是作为一个优雅的后备：<button type="submit" form="frmFoo" onclick="!this.form&&$('#'+$(this).attr('form')).submit()"> 正如实验所揭示的，this.form 是附加的表单 DomElement，否则它为 null。 // 编辑：jQuery，但也可以使用 vanilla

如果您想在 MS Edge 中查看表单属性，请在此处投票：wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…

@AdrianFöder 后备的 vanilla-JS 版本是：<button type="submit" form="frmFoo" onclick="!this.form && document.getElementById('myform').submit()">

【参考方案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>

现在，此链接允许您通过单击 <label> 元素来“单击”表单 <submit> 元素。

【讨论】：

更好的解决方案恕我直言，无需 js 和重大更改 :)

也适用于 IE 11。我知道，你不会经常在同一个句子中看到“works”和“IE”。

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

非常好的解决方案，但是可能有人反对使用这种方法。 label 不是可聚焦元素 (AFAIK)，因此对于仅使用键盘导航到“按钮”然后按空格键激活该按钮的用户来说，它并不直观。 （我知道您可以按 <enter> 代替，但这不是人们习惯使用键盘导航表单的唯一方式）

要通过标签按钮聚焦label，您可以使用tabindex HTML 属性：<label for="submit-form" tabindex="0">Submit</label> 按照this question

【参考方案3】：

更新：In modern browsers you can use the form attribute to do this。

---

据我所知，如果没有 javascript，您将无法做到这一点。

这就是规范所说的

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

这是我的大胆

submit 按钮被视为控件。

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

来自cmets

我有一个多选项卡式设置区域，其中有一个按钮可以更新所有内容，因为 根据它的设计，按钮将在表单之外。

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

【讨论】：

仅供参考，HTML5 支持，还不完美，但它已经到了那里：impressivewebs.com/html5-form-attribute

我在这里有点晚了，但是你怎么能把输入放在表单中，但把它放在别的地方呢？

您可以将 标签用于 html4 的此目的

答案不再有效，因为乔松鼠的答案有效 - 截至 2016 年。

提出的 JavaScript 解决方案存在问题。例如，在最新的 Chrome 中，会跳过 HTML5 验证（必需等）。我能想到的一种解决方案是有两个提交按钮，一个隐藏。应在隐藏按钮上触发单击。未经适当验证，不得提交表单。

【参考方案4】：

如果你可以使用 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>

所以，底线是创建一个像提交一样的按钮，并将真正的提交按钮放在表单中（当然隐藏它），然后通过点击“假提交”按钮通过jquery提交表单。希望对您有所帮助。

【讨论】：

为了让它在支持 HTML5 的浏览器和 IE 上运行，这是我的 jQuery $('button[form]').click(function () var formId = $(this).attr('form'); $('#' + formId).submit(); );

【参考方案5】：

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

</form>

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

这对我有用，为表单提供远程提交按钮。

【讨论】：

谢谢，对于这个简单的功能，我不想写几行 JS 代码。 PS：我的应用不需要支持IE

如果您想在MS Edge中看到表单属性功能，请在这里投票：wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…

【参考方案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

【讨论】：

这是最好的答案，IMO。直接来自 MDN 按钮的表单属性：按钮关联的表单元素（其表单所有者）。该属性的值必须是同一文档中

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

【参考方案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>

... 仍然会愉快地提交表单，因为您为其分配了表单名称。表单认为按钮是它的一部分，即使按钮在标签之外，这也不需要 javascript 来提交表单（这可能是错误的，即表单可能会提交但引导错误/验证我无法显示，我测试过） .

【讨论】：

现在，这应该是有效的答案

这样做的问题是默认事件中没有表单值。

也可以与 作为按钮一起使用。

【参考方案8】：

试试这个：

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

虽然我建议在表单中添加id 并通过它而不是document.forms[index] 访问。

【讨论】：

是的，我知道如何用 javascript 来做，如果你看我没有将它标记为 javascript。

对不起，您的帖子中没有明确说明您正在寻找非 JS 方式（我以为您错过了在 JS 下标记它）。

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

【参考方案9】：

你总是可以使用 jQuery：

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

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

【参考方案10】：

这是一个非常可靠的解决方案，它结合了迄今为止最好的想法，并包括我对 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; 的使用。这是故意的。使用 bootstrap 的 .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。等等。 (See this fiddle)。

【讨论】：

不错！与 IE11 和 Firefox 配合使用效果很好。谢谢！

@eaglei22 很高兴听到它:)

将其他地方的所有功能/建议放在一起对您非常有帮助，所以谢谢。但是，即使您现在可以选择按钮/标签，我也看不到从键盘“单击”它的任何方式，例如按Enter 无效。因此，能够对其进行标签似乎有点毫无意义。有没有办法在不使用 JavaScript 的情况下做到这一点？

@AndrewWillems 这是一个很好的观点。不幸的是，我看不到使用键盘在没有 javascript 的情况下触发点击事件的方法。 PS：如果文章对你有帮助，请点赞。它不会花费您任何费用，但对任何提供有用答案的人来说意义重大。

我也很喜欢你修复了草率和无效的<input... /> 自动关闭语法，几乎每个人都在此处（也）公然错误地使用它，以正确的 void no-close 标记！ :) 赞！

【参考方案11】：

这工作完美！ ;)

这可以使用 Ajax 和我所说的“表单镜像元素”来完成。您可以创建一个假表单，而不是发送带有外部元素的表单。 不需要之前的表格。

<!-- This will do the trick -->
<div >
    <input id="mirror_element" type="text" name="your_input_name">
    <input type="button" value="Send Form">
</div>

代码 ajax 会是这样的：

    <script>
        ajax_form_mirror("#mirror_element", "your_file.php", "#your_element_response", "POST");

        function ajax_form_mirror(form, file, element, method) 
            $(document).ready(function() 
                // Ajax
                $(form).change(function()  // catch the forms submit event
                    $.ajax(                // create an AJAX call...
                        data: $(this).serialize(),      // get the form data
                        type: method,                   // GET or POST
                        url: file,                      // the file to call
                        success: function (response)    // on success..
                        $(element).html(response);  // update the DIV
                        
                    );

                    return false; // cancel original event to prevent form submitting
                );
            );
        
   </script>

如果您想在另一个表单中发送一些数据而不提交父表单，这非常有用。

此代码可能可以根据需要进行调整/优化。它完美地工作！ ;) 如果您想要这样的选择选项框，也可以使用：

<div>
    <select id="mirror_element" name="your_input_name">
        <option id="1" value="1">A</option>
        <option id="2" value="2">B</option>
        <option id="3" value="3">C</option>
        <option id="4" value="4">D</option>
    </select>
</div>

我希望它能帮助像它帮助我的人。 ;)

【参考方案12】：

您的<button> 需要具有以下两个属性：type="submit" 和form="form_id"（如果它在表单之外）。示例：

<form id="my-form">
   ...
</form>

<button type="submit" form="my-form">
   Submit
</button>

此外，<button> 元素还可以具有formmethod 和formaction 属性，分别覆盖表单的method 和action。示例：

<button type="submit" form="my-form" formmethod="post" formaction="/something.php">
   Submit
</button>

以下是对<button> 元素所有可用属性的引用：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

【参考方案13】：

也许这可行，但我不知道这是否是有效的 HTML。

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

<label for="submitButton">Submit</label>

【讨论】：

这个问题本身已经存在这个答案。 ***.com/a/23456905/2968465

【参考方案14】：

我用过这种方式，很喜欢它，它在提交之前验证表单也与 safari/google 兼容。没有 jquery n.n.

        <module-body>
            <form id="testform" method="post">
                <label>Input Title</label>
                <input name="named1" placeholder="Placeholder"  title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]1,20" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]1,20" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]1,20" />
                <alert>No Alerts!</alert>
            </form>
        </module-body>
        <module-footer>
            <input type="button" onclick='if (document.querySelector("#testform").reportValidity())  document.querySelector("#testform").submit(); ' value="Submit">
            <input type="button" value="Reset">
        </module-footer>

【参考方案15】：

我遇到了一个问题，我试图从表格单元格元素中隐藏表单，但仍显示表单提交按钮。 问题是表单元素仍然占用了额外的空白空间，使我的表格单元格的格式看起来很奇怪。 display:none 和 visibility:hidden 属性不起作用，因为它也会隐藏提交按钮，因为它包含在我试图隐藏的表单中。 简单的答案是使用 CSS 将表单高度设置为几乎为零

所以，

CSS -

    #formID height:4px;

为我工作。