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

尝试这个：

<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。等等。 (See this fiddle)。

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

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

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

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

<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

这工作完美！ ;)

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

我用这种方式，很喜欢它，它在提交之前验证表单也与 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>

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

所以，

CSS -

    #formID {height:4px;}

为我工作。