说我有:

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

<input type="submit" />

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


当前回答

更新:在现代浏览器中,您可以使用form属性来完成此操作。


据我所知,你不能没有javascript做到这一点。

这是说明书上说的

用于创建控件的元素通常出现在FORM内部 元素,但也可以出现在FORM元素声明之外 当它们被用于构建用户界面时。这在 内在事件部分。注意,窗体外部的控件不能这样做 成功控制。

这是我的粗体

提交按钮被认为是一个控件。

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

从评论中

我有一个多选项卡设置区域的按钮更新所有,到期 根据它的设计,按钮将在窗体之外。

为什么不把输入放在表单内部,而是使用CSS将其定位到页面的其他地方呢?

其他回答

更新:在现代浏览器中,您可以使用form属性来完成此操作。


据我所知,你不能没有javascript做到这一点。

这是说明书上说的

用于创建控件的元素通常出现在FORM内部 元素,但也可以出现在FORM元素声明之外 当它们被用于构建用户界面时。这在 内在事件部分。注意,窗体外部的控件不能这样做 成功控制。

这是我的粗体

提交按钮被认为是一个控件。

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

从评论中

我有一个多选项卡设置区域的按钮更新所有,到期 根据它的设计,按钮将在窗体之外。

为什么不把输入放在表单内部,而是使用CSS将其定位到页面的其他地方呢?

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

</form>

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

这对我来说很有用,为表单设置一个远程提交按钮。

通过在组件的定义中添加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,即表单可以提交,但引导错误/验证我无法显示,我测试)。

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

你可以使用jQuery:

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

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