说我有:

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

<input type="submit" />

我如何在表单外提交那个提交按钮,我认为在HTML5中有一个提交的动作属性,但我不确定这是否完全跨浏览器,如果不是的话,有没有办法这样做?


当前回答

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

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

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

其他回答

如果你会使用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通过点击“Fake Submit”按钮提交表单。希望能有所帮助。

这是一个相当可靠的解决方案,它包含了迄今为止最好的想法,也包括了我对奥弗林强调的问题的解决方案。不使用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样式的游标:指针。瞧。(看这把小提琴)。

你的<按钮>将需要有这2个属性:type="submit"和form="form_id"如果它在表单之外。例子:

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

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

此外,<button>元素还可以具有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

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

一个对我很有效的解决方案,在这里仍然没有。它需要在<表单>中有一个视觉上隐藏的<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>元素。