Javascript 不提交表单的 HTML 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2825856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML button to NOT submit form
提问by arik
I have a form. Outside that form, I have a button. A simple button, like this:
我有一个表格。在那个表格之外，我有一个按钮。一个简单的按钮，像这样：
<button>My Button</button>
Nevertheless, when I click it, it submits the form. Here's the code:
然而，当我点击它时，它会提交表单。这是代码：
<form id="myform">
<input />
</form>
<button>My Button</button>
All this button should do is some JavaScript. But even when it looks just like in the code above, it submits the form. When I change the tag button to span, it works perfectly. But unfortunately, it needs to be a button. Is there any way to block that button from submitting the form? Like e. g.
这个按钮应该做的只是一些 JavaScript。但即使它看起来就像上面的代码一样，它也会提交表单。当我将标签按钮更改为跨度时，它可以完美运行。但不幸的是，它必须是一个按钮。有没有办法阻止该按钮提交表单？像例如
<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>
回答by Dave Markle
I think this is the most annoying little peculiarity of HTML... That button needs to be of type "button" in order to not submit.
我认为这是 HTML 最令人讨厌的小特性......该按钮需要是“按钮”类型才能不提交。
<button type="button">My Button</button>
Update 5-Feb-2019:As per the HTML Living Standard(and also HTML 5 specification):
2019 年 2 月 5 日更新：根据HTML Living Standard（以及HTML 5 规范）：
The missing value defaultand invalid value defaultare the Submit Button state.
在缺失值默认和无效值默认是提交按钮状态。
回答by ThiefMaster
return false;at the end of the onclick handler will do the job. However, it's be better to simply add type="button"to the <button>- that way it behaves properly even without any JavaScript.
return false;在 onclick 处理程序结束时将完成这项工作。但是，最好简单地添加type="button"到<button>- 这样它即使没有任何 JavaScript 也能正常运行。
回答by Gert Grenander
Dave Markle is correct. From W3School's website:
戴夫马克尔是对的。从W3School 的网站：
Always specify the type attribute for the button. The default type for Internet Explorer is "button", while in other browsers (and in the W3C specification) it is "submit".
始终为按钮指定类型属性。Internet Explorer 的默认类型是“按钮”，而在其他浏览器（以及 W3C 规范中）是“提交”。
In other words, the browser you're using is following W3C's specification.
换句话说，您使用的浏览器遵循 W3C 的规范。
回答by GJZ
By default, html buttons submit a form.
默认情况下，html 按钮提交表单。
This is due to the fact that even buttons located outside of a form act as submitters (see the W3Schools website: http://www.w3schools.com/tags/att_button_form.asp)
这是因为即使位于表单外部的按钮也充当提交者（请参阅 W3Schools 网站：http: //www.w3schools.com/tags/att_button_form.asp）
In other words, the button type is "submit" by default
换句话说，按钮类型默认为“提交”
<button type="submit">Button Text</button>
Therefore an easy way to get around this is to use the button type.
因此，解决这个问题的一个简单方法是使用按钮类型。
<button type="button">Button Text</button>
Other options include returning false at the end of the onclickor any other handler for when the button is clicked, or to using an < input> tag instead
其他选项包括在onclick或任何其他处理程序结束时返回 false 以在单击按钮时使用，或者改为使用 < input> 标记
To find out more, check out the Mozilla Developer Network's information on buttons: https://developer.mozilla.org/en/docs/Web/HTML/Element/button
要了解更多信息，请查看 Mozilla 开发者网络关于按钮的信息：https: //developer.mozilla.org/en/docs/Web/HTML/Element/button
回答by Tim
It's recommended not to use the <Button>tag. Use the <Input type='Button' onclick='return false;'>tag instead. (Using the "return false" should indeed not send the form.)
建议不要使用<Button>标签。改用<Input type='Button' onclick='return false;'>标签。（使用“return false”确实不应该发送表单。）
Some reference material
一些参考资料
回答by motss
For accessibility reason, I could not pull it off with multiple type=submitbuttons. The only way to work natively with a formwith multiple buttons but ONLYone can submit the form when hitting the Enterkey is to ensure that only one of them is of type=submitwhile others are in other type such as type=button. By this way, you can benefit from the better user experience in dealing with a form on a browser in terms of keyboard support.
出于可访问性原因，我无法使用多个type=submit按钮将其关闭。本地使用form具有多个按钮但只有一个可以在Enter按下键时提交表单的唯一方法是确保只有其中一个是 ，type=submit而其他是其他类型，例如type=button. 通过这种方式，您可以从键盘支持方面在浏览器上处理表单时获得更好的用户体验。
回答by kk64738
Another option that worked for me was to add onsubmit="return false;" to the form tag.
另一个对我有用的选项是添加 onsubmit="return false;" 到表单标签。
<form onsubmit="return false;">
Semantically probably not as good a solution as the above methods of changing the button type, but seems to be an option if you just want a form element the won't submit.
从语义上讲，解决方案可能不如上述更改按钮类型的方法好，但如果您只想要一个不会提交的表单元素，这似乎是一种选择。
