Question

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

<button>My Button</button>

然而，当我点击它时，它会提交表单。这是代码：

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

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

<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 specification）：

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

Answer 2

onclick处理程序结束时的

return false;将完成这项工作。但是，最好只将type="button"添加到<button> - 这样即使没有任何JavaScript也能正常运行。

Answer 3

Dave Markle是对的。来自W3School's website：

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

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

Answer 4

默认情况下，html按钮会提交表单。

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

换句话说，按钮类型是＆＃34;提交＆＃34;默认情况下

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

因此，解决此问题的一种简单方法是使用按钮类型。

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

其他选项包括在 onclick 结束时返回false或单击按钮时的任何其他处理程序，或者使用＆lt;输入＆GT;而是标记

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

Answer 5

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

一些reference material

Answer 6

出于辅助原因，我无法使用多个type=submit按钮将其拉出。使用具有多个按钮的form本机工作的唯一方法但仅一个可以在按下Enter键时提交表单，以确保其中只有一个是{ {1}}而其他人则属于其他类型，例如type=submit。通过这种方式，您可以从在键盘支持方面处理浏览器表单的更好用户体验中受益。

Answer 7

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

<form onsubmit="return false;">

从表面上看，可能不如上述更改按钮类型的方法那样好，但是，如果您只希望不提交表单元素，这似乎是一个选择。

HTML按钮不提交表单

7 个答案: