说我有:

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

<input type="submit" />

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


当前回答

试试这个:

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

尽管我建议在表单中添加一个id,并通过它来访问,而不是document.forms[index]。

其他回答

你的<按钮>将需要有这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

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

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

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

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

通过在组件的定义中添加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;}

为我工作。