通过在组件的定义中添加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来提交表单(这可以是bug，即表单可以提交，但引导错误/验证我无法显示，我测试)。

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

So,

CSS—

    #formID {height:4px;}

为我工作。

这工作很完美!；）

这可以使用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>

我希望它能像帮助我一样帮助别人。；）

<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]。

这是一个相当可靠的解决方案，它包含了迄今为止最好的想法，也包括了我对奥弗林强调的问题的解决方案。不使用javascript。

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

使用一个标准的提交输入，并在表单外添加一个标签:

<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样式的游标:指针。瞧。(看这把小提琴)。