提交表单使用<表单>标签

说我有:

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


<input type="submit" />

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

432826 次浏览
小开

试试这个:

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

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

小开
最佳答案

更新:在现代浏览器中，你可以使用form属性来做到这一点。

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

这是说明书上说的

用于创建控件的元素通常出现在FORM中 元素，但也可以出现在FORM元素声明之外 当它们被用于构建用户界面时。这在 内在事件部分。注意表单外部的控件不能

.

这是我的粗体

submit按钮被认为是一个控件。

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

从评论中

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

为什么不将input放在表单内部，而是使用CSS将其定位在页面的其他地方?

小开

在HTML5中，有表单属性。基本上

<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”按钮提交表单。希望能有所帮助。

小开

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

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


</form>


<!-- External button-->
<button type="submit" form="form1">Click me!</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>
小开

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

小开

这工作很完美!；）

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

我希望它能像帮助我一样帮助别人。；）

小开

你可以使用jQuery:

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


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

类似于这里的另一个解决方案，只是稍加修改:

<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

小开

我有一个问题，我试图隐藏窗体从表格单元格元素，但仍然显示表单提交按钮。 问题是表单元素仍然占用了额外的空白空间，使得表格单元格的格式看起来很奇怪。 display:none和visibility:hidden属性不起作用，因为它也会隐藏提交按钮，因为它包含在我试图隐藏的表单中。 简单的答案是使用CSS

将表单高度设置为几乎为零

所以,

CSS—

    #formID {height:4px;}

为我工作。

小开

我使用这种方式，并喜欢它，它在提交之前验证表单也兼容safari/谷歌。没有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>
小开

通过将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，即表单可以提交，但引导错误/验证我无法显示，我测试)。

小开

你的<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>元素所有可用属性的引用


提交答案