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

时间：2011-08-11 03:55:02

标签： html

说我有：

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

<input type="submit" />

如何使用表单外的提交按钮提交该表单，我认为在HTML5中有一个提交的操作属性，但我不确定那些是完全跨浏览器，如果不是无论如何要做到这一点？

15 个答案:

答案 0 :(得分：523)

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

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

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

答案 1 :(得分：292)

这里仍然缺少一个对我有用的解决方案。它需要在<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>

现在，通过此链接，您可以点击＆＃39;单击<submit>元素，即<label>元素。

答案 2 :(得分：68)

更新：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

来自评论

  

我有一个多选项卡设置区域，其中包含一个按钮，可以全部更新   对于它的设计，按钮将在表单之外。

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

答案 3 :(得分：43)

如果你可以使用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这样的按钮，并将真正的提交按钮放在表单中（当然隐藏它），然后通过单击“假提交”按钮通过jquery提交表单。希望它有所帮助。

答案 4 :(得分：29)

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

</form>

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

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

答案 5 :(得分：15)

试试这个：

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

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

答案 6 :(得分：11)

你总是可以使用jQuery：

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

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

答案 7 :(得分：10)

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

<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

答案 8 :(得分：8)

这是一个非常可靠的解决方案，其中包含了迄今为止最好的想法，以及我对使用Offerein's突出显示的问题的解决方案。没有使用javascript。

如果您关心与IE（甚至是Edge 13）的向后兼容性，则无法使用form="your-form" attribute。

使用带有display 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。瞧瞧。 （See this fiddle）。

答案 9 :(得分：7)

您可以通过将 <form> 添加到组件的定义中来告诉表单 form="yourFormId" 标签之外的外部组件属于它。

在这种情况下，

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

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

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

答案 10 :(得分：3)

这项工作非常完美！ ;）

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

我希望有人能帮助我。 ;）

答案 11 :(得分：2)

您的 <button> 将需要具有以下 2 个属性：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

答案 12 :(得分：1)

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

答案 13 :(得分：0)

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

所以

CSS-

    #formID {height:4px;}

为我工作。

答案 14 :(得分：0)

我以这种方式使用，并很喜欢它，它在提交之前验证了表单，也与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>
相关问题
最新问题