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

说我有：

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

<input type="submit" />

我该如何使用表单外的“提交”按钮提交该表单，我认为在HTML5中有一个提交的action属性，但是我不确定那是否是完全跨浏览器的，如果不是，则不能做这个？

更新：在现代浏览器中，您可以使用form属性执行此操作。

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

规格说明如下

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

那是我的大胆

甲submit按钮被认为是一种控制。

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

从评论

我有一个带有多个选项卡的设置区域，其中的一个按钮可以全部更新，由于其设计的原因，该按钮将位于表单外部。

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

在HTML5中，有form属性。基本上

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

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

一个对我来说很好的解决方案，在这里仍然缺少。它要求在中具有视觉上隐藏的元素，<submit>或在其外部具有关联的元素。它看起来像这样：<input type="submit"><form><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>

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

如果可以使用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的按钮，然后将真正的Submit按钮放入表单中（当然将其隐藏），然后通过jquery通过单击“ Fake Submit”按钮来提交表单。希望能帮助到你。

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

</form>

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

这对我来说很有效，因为有一个表单的远程提交按钮。

与此处的另一个解决方案类似，但进行了少量修改：

<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

尝试这个：

<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;。这是故意的。使用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。等等。（请参阅此小提琴）。

这工作完美！;）

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

我希望它能帮助像我这样的人。;）

也许这可以工作，但是我不知道这是否是有效的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>

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

所以，

CSS-

    #formID {height:4px;}

为我工作。

我使用了这种方式，并很喜欢它，它在提交之前验证了表单也与safari / google兼容。没有jQuery nn

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