HTML按钮不提交表单

我有一个表格。在该表格之外，我有一个按钮。一个简单的按钮，如下所示：

<button>My Button</button>

不过，当我单击它时，它将提交表单。这是代码：

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

该按钮应该做的就是编写一些JavaScript。但是，即使看起来像上面的代码一样，它也会提交表单。当我将标签按钮更改为跨度时，它可以正常工作。但不幸的是，它必须是一个按钮。有什么方法可以阻止该按钮提交表单？像例如

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

return false; 在onclick处理程序的末尾将完成此工作。但是，最好在<button>简单地添加type="button" -这样即使没有JavaScript也可以正常运行。

我认为这是HTML最令人讨厌的小特性...该按钮必须为“按钮”类型才能不提交。

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

更新2019年2月5日：根据HTML生活标准（以及HTML 5规范）：

缺少的默认值和无效的默认值是“提交按钮”状态。

建议不要使用<Button>标记。请使用<Input type='Button' onclick='return false;'>标记代替。（使用“ return false”确实不应该发送表格。）

戴夫·马克尔（Dave Markle）是正确的。从W3School的网站：

始终为按钮指定type属性。 Internet Explorer的默认类型是“按钮”，而在其他浏览器（和W3C规范）中，默认类型是“提交”。

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

默认情况下，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

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3188489

标签