HTML按钮不提交表单

我有一张表格。在表单的外面，我有一个按钮。一个简单的按钮，像这样:

<button>My Button</button>

然而，当我单击它时，它提交了表单。代码如下:

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

所有这个按钮应该做的是一些JavaScript。但即使看起来像上面的代码，它也会提交表单。当我将标签按钮更改为span时，它工作得很好。但不幸的是，它必须是一个按钮。是否有任何方法阻止该按钮提交表单?例如:

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>
239734 次浏览
小开

在onclick处理程序的末尾return false;将完成这项工作。然而，最好是简单地将type="button"添加到<button>中——这样即使没有任何JavaScript，它也能正常工作。

小开
最佳答案

我认为这是HTML最烦人的小特点……该按钮需要为“button”类型，以便不提交。

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

根据HTML生活标准(以及HTML 5规范):

缺少值default和无效值default是提交 按钮状态。< / p >
小开

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

一些参考资料

小开

戴夫·马克尔是对的。从W3School的网站:

总是指定类型属性 按钮。的默认类型 ie浏览器是“按钮”，而 在其他浏览器中(以及W3C中)

.

.

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

小开

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

这是由于即使位于表单之外的按钮也充当了提交者(参见W3Schools网站:http://www.w3schools.com/tags/att_button_form.asp)。

换句话说，按钮类型默认为“submit”

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

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

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

其他选项包括在onclick结尾返回false，或在按钮被单击时返回任何其他处理程序，或使用<请输入>标签

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

小开

出于可访问性的原因，我无法使用多个type=submit按钮。本机使用带有多个按钮的form(但只有可以在按Enter键时提交表单)的唯一方法是确保其中只有一个是type=submit，而其他类型(如type=button)。通过这种方式，在浏览器上处理表单时，您可以从键盘支持方面获得更好的用户体验。

小开

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

<form onsubmit="return false;">

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

小开

在游戏的后期，但您不需要任何JavaScript代码来使用按钮作为按钮。默认行为是提交表单，大多数人没有意识到这一点。类型参数有三个选项:submit(默认)、button和reset。这很酷的一点是，如果您添加了事件处理程序，它将绕过提交表单。

<button type="button">My Button</button>
小开
还有一种方法可以防止点击按钮时提交。 要实现这一点，你必须使用event.preventDefault()方法 

document.querySelector("button#myButton").addEventListener("click", (event) => {
document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you submit this!<br>";
event.preventDefault();
}, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<form id="myform">
<label>Label
<input />
</label>
<button id="myButton">My Button</button>
</form>


<div id="output-box"></div>
<script src="src/script.js"></script>
</body>
</html>


提交答案