HTML 按钮不提交表单
[英]HTML button to NOT submit form
问题描述
我有一个表格。 在那个表格之外，我有一个按钮。 一个简单的按钮，如下所示：
<button>My Button</button>
不过，当我单击它时，它会提交表单。 这是代码：
<form id="myform">
<label>Label
<input />
</label>
</form>
<button>My Button</button>
所有这个按钮应该做的是一些 JavaScript。 但即使它看起来就像上面的代码一样，它也会提交表单。 当我将标签按钮更改为跨度时，它可以完美运行。 但不幸的是，它必须是一个按钮。 有没有办法阻止该按钮提交表单？ 像例如
<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>
9 个解决方案
解决方案1
1062 已采纳 2010-05-13 10:03:05
解决方案2
39 2010-05-13 10:02:28
return false; 在 onclick 处理程序结束时将完成这项工作。 但是，最好将type="button"简单地添加到<button> - 这样即使没有任何 JavaScript，它也能正常运行。
解决方案3
24 2016-11-20 12:02:00
默认情况下，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
解决方案4
16 2010-05-13 10:28:54
戴夫马克尔是正确的。 来自W3School 的网站：
始终指定按钮的类型属性。 Internet Explorer 的默认类型是“按钮”，而在其他浏览器（以及 W3C 规范中）它是“提交”。
换句话说，您使用的浏览器遵循 W3C 的规范。
解决方案5
6 2020-03-18 17:14:52
另一个对我有用的选项是添加 onsubmit="return false;" 到表单标签。
<form onsubmit="return false;">
语义上可能不如上述更改按钮类型的方法那么好的解决方案，但如果您只想要一个不会提交的表单元素，这似乎是一种选择。
解决方案6
2 2010-05-13 10:11:38
建议不要使用<Button>标签。 请改用<Input type='Button' onclick='return false;'>标签。 （使用“return false”确实不应该发送表单。）
一些参考资料
解决方案7
1 2017-07-25 10:32:50
出于可访问性的原因，我无法使用多个type=submit按钮来完成它。 本地处理具有多个按钮但只有一个可以在Enter键时提交form的唯一方法是确保其中只有一个是type=submit而其他是其他类型，例如type=button 。 通过这种方式，您可以从键盘支持方面在浏览器上处理表单时获得更好的用户体验。
解决方案8
0 2022-02-11 17:24:52
在游戏后期，但您不需要任何 JavaScript 代码即可将按钮用作按钮。 默认行为是提交表单，大多数人没有意识到这一点。 type参数有三个选项：submit（默认）、button和reset。 很酷的一点是，如果您添加一个事件处理程序，它将绕过提交表单。
<button type="button">My Button</button>
解决方案9
0 2022-09-01 09:10:09
还有一种方法可以防止在单击按钮时进行提交。 为此，您必须使用 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>
HTML普通按钮提交表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.