HTML按钮不提交表单

Question

我有一张表格.在那个表格之外,我有一个按钮.一个简单的按钮,如下所示:

<button>My Button</button>

然而,当我点击它时,它会提交表单.这是代码:

<form id="myform">
    <input />
</form>
<button>My Button</button>

所有这个按钮应该是一些JavaScript.但即使它看起来像上面的代码,它提交表单.当我将标签按钮更改为span时,它可以完美地工作.但不幸的是,它需要成为一个按钮.有没有办法阻止该按钮提交表单？比如说

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

Answer 1

我认为这是HTML中最烦人的小特性......该按钮需要是"按钮"类型才能不提交.

<button type="button">My Button</button>

更新于2019年2月5日:根据HTML Living Standard(以及HTML 5规范):

在缺失值默认和无效值默认是提交按钮状态.

这是一个很好的答案,但它不是*特点*.`<button>`标签中`type`属性的默认值是`submit`.当改为`type = button`时,`<button>`没有默认行为.请参阅此处的`type`属性:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button (33认同)
@Powerslave有任何理由不"使用<button>" (9认同)
@SandipPingle没有理由使用它,除非你需要一些非常复杂的样式.此外,在某些情况下,IE6和IE7(幸运的是被逐步淘汰)处理"<button>"错误.另外,`<button>`不是100%跨浏览器兼容的,因为在表单中使用时,不同的浏览器可能会为同一个`<button>`提交不同的值. (4认同)
非特定于表单的元素的默认（因此隐式）行为是触发潜在的破坏性特定于表单的功能。这怎么可能不是 HTML 规范做出的_特殊_设计决定呢？ (2认同)

Answer 2

return false;在onclick处理程序的末尾将完成这项工作.但是,最好简单地添加type="button"到<button>- 即使没有任何JavaScript它也能正常运行.

Answer 3

戴夫马克尔是对的.来自W3School的网站:

始终指定按钮的type属性.Internet Explorer的默认类型是"按钮",而在其他浏览器(以及W3C规范)中,它是"提交".

换句话说,您使用的浏览器遵循W3C的规范.

Answer 4

默认情况下,html按钮提交表单.

这是因为即使是位于表单外部的按钮也可以作为提交者(参见W3Schools网站:http://www.w3schools.com/tags/att_button_form.asp)

换句话说,按钮类型默认为"提交"

<button type="submit">Button Text</button>

因此,解决这个问题的简单方法是使用按钮类型.

<button type="button">Button Text</button>

其他选项包括在onclick结束时返回false 或单击按钮时的任何其他处理程序,或者使用<input>标签

要了解更多信息,请查看Mozilla开发者网络有关按钮的信息:https://developer.mozilla.org/en/docs/Web/HTML/Element/button

Answer 5

另一个对我有用的选项是添加 onsubmit="return false;" 到表单标签。

<form onsubmit="return false;">

从语义上讲，解决方案可能不如上述更改按钮类型的方法好，但如果您只想要一个不会提交的表单元素，这似乎是一个选项。