说我有:
<form method="get" action="something.php">
<input type="text" name="name" />
</form>
<input type="submit" />
如何使用表单外的提交按钮提交该表单,我认为在HTML5中有一个提交的操作属性,但我不确定那些是否完全跨浏览器,如果不是,那么无论如何做这个？
Lie*_*yan 559
在HTML5中,有form属性.基本上
<form id="myform" method="get" action="something.php">
<input type="text" name="name" />
</form>
<input type="submit" form="myform" />
Off*_*ins 300
对我来说很有用的解决方案仍然缺少.它需要一个视觉上隐藏的<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>
现在,通过此链接,您可以<submit>通过单击<label>元素来"单击"表单元素.
Jas*_*aro 76
据我所知,没有javascript就无法做到这一点.
这是规范所说的
用于创建控件的元素通常出现在FORM元素中,但在用于构建用户界面时,也可能出现在FORM元素声明之外.这将在内部事件一节中讨论.请注意,表单外部的控件无法成功控制.
那是我的大胆
甲submit按钮被认为是一种控制.
http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1
从评论
我有一个多选项卡设置区域,其中有一个按钮可以全部更新,由于其设计,按钮将位于表单之外.
为什么不放置input在窗体内部,但使用CSS将其放置在页面的其他位置？
dav*_*dav 46
如果你可以使用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提交表单.希望能帮助到你.
Joe*_*rel 29
<form method="get" id="form1" action="something.php">
</form>
<!-- External button-->
<button type="submit" form="form1">Click me!</button>
这对我有用,可以为表单提供一个远程提交按钮.
Mrc*_*ief 16
试试这个:
<input type="submit" onclick="document.forms[0].submit();" />
虽然我建议id在表单中添加一个并通过它来访问而不是document.forms[index].
小智 15
与此处的其他解决方案类似,只需稍加修改:
<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
Geo*_*n0w 15
您可以<form>通过form="yourFormId"在组件的定义中添加来告诉表单标签外部的外部组件属于它。
在这种情况下，
<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 来提交表单（这可能有问题，即表单可以提交但引导错误/验证我无法显示，我测试过） .
Ara*_*esh 11
你总是可以使用jQuery:
<form id="myForm">
<!-- form controls -->
</form>
<input type="submit" id="myButton">
<script>
$(document).ready(function () {
$("#myButton").click(function () {
$("#myForm").submit();
});
});
</script>
这是一个非常可靠的解决方案,其中包含了迄今为止最好的想法,以及我对使用Offerein's突出显示的问题的解决方案.没有使用javascript.
如果您关心与IE(甚至Edge 13)的向后兼容性,则无法使用该form="your-form" 属性.
使用带有display none的标准提交输入,并在表单外添加标签:
<form id="your-form">
<input type="submit" id="your-form-submit" style="display: none;">
</form>
注意使用display: none;.这是故意的.使用引导程序的.hidden使用jQuery的阶级矛盾.show()和.hide(),并从此在引导4被弃用.
现在只需为您的提交添加一个标签(为bootstrap设计):
<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0">
Submit
</label>
与其他解决方案不同,我也使用tabindex - 设置为0 - 这意味着我们现在兼容键盘标签.添加role="button"属性会为其提供CSS样式cursor: pointer.瞧瞧.(见这个小提琴).
您的<button>遗嘱需要具有以下两个属性：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