我有一个表格。在那个表格之外,我有一个按钮。一个简单的按钮,如下所示:
<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>
我认为这是 HTML 最烦人的小特性……该按钮必须是“按钮”类型才能不提交。
<button type="button">My Button</button>
2019 年 2 月 5 日更新:根据 HTML Living Standard(以及 HTML 5 specification):
缺失值默认值和无效值默认值是提交按钮状态。
return false;
在 onclick 处理程序的末尾将完成这项工作。但是,最好将 type="button"
添加到 <button>
- 这样即使没有任何 JavaScript,它也能正常运行。
return false;
并非在所有情况下都有效,而 type="Button"
则有效。即使启用了 JavaScript。
默认情况下,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 或单击按钮时的任何其他处理程序,或者使用 标记代替
要了解更多信息,请查看 Mozilla 开发者网络关于按钮的信息:https://developer.mozilla.org/en/docs/Web/HTML/Element/button
戴夫马克尔是正确的。从 W3School's website:
始终指定按钮的类型属性。 Internet Explorer 的默认类型是“按钮”,而在其他浏览器(以及 W3C 规范中)它是“提交”。
换句话说,您使用的浏览器遵循 W3C 的规范。
另一个对我有用的选项是添加 onsubmit="return false;"到表单标签。
<form onsubmit="return false;">
语义上可能不如上述更改按钮类型的方法那么好的解决方案,但如果您只想要一个不会提交的表单元素,这似乎是一种选择。
建议不要使用 <Button>
标记。请改用 <Input type='Button' onclick='return false;'>
标记。 (使用“return false”确实不应该发送表单。)
<input type="button" />
就足够了,使用 return false;
就足够了 - 无需同时使用两者。
出于可访问性的原因,我无法使用多个 type=submit
按钮来完成它。使用具有多个按钮但仅可以在点击 Enter
键时提交表单的 form
本地工作的唯一方法是确保其中只有一个是 type=submit
而其他属于其他类型,例如 type=button
。通过这种方式,您可以从键盘支持方面在浏览器上处理表单时获得更好的用户体验。
在游戏后期,但您不需要任何 JavaScript 代码即可将按钮用作按钮。默认行为是提交表单,大多数人没有意识到这一点。 type参数有三个选项:submit(默认)、button和reset。很酷的一点是,如果您添加一个事件处理程序,它将绕过提交表单。
<button type="button">My Button</button>
to use <button>
<button>
。此外,<button>
不是 100% 跨浏览器兼容的,因为在表单中使用时,不同的浏览器可能会为相同的<button>
提交不同的值。<button>
标记中type
属性的默认值为submit
。当更改为type=button
时,<button>
没有默认行为。请参阅此处的type
属性:developer.mozilla.org/en-US/docs/Web/HTML/Element/button