不提交表单的 HTML 按钮

Posted 2023-05-07

【中文标题】不提交表单的 HTML 按钮

【英文标题】：HTML button to NOT submit form

【发布时间】：2011-02-19 00:44:33

【问题描述】：

我有一个表格。在那个表格之外，我有一个按钮。一个简单的按钮，像这样：

<button>My Button</button>

不过，当我点击它时，它会提交表单。代码如下：

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

这个按钮应该做的只是一些 javascript。但即使它看起来就像上面的代码一样，它也会提交表单。当我将标签按钮更改为跨度时，它可以完美运行。但不幸的是，它必须是一个按钮。有没有办法阻止该按钮提交表单？像 e。 g.

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

【参考方案1】：

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

【讨论】：

不提交表单的按钮仅在启用 JavaScript 时才有用...我同意 type="button" 更简洁。

return false; 并不适用于所有场景，而 type="Button" 可以。即使启用了 JavaScript。

【参考方案2】：

我认为这是 html 最令人讨厌的小特性...该按钮必须是“按钮”类型才能不提交。

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

2019 年 2 月 5 日更新：根据 HTML Living Standard（以及 HTML 5 specification）：

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

【讨论】：

@Powerslave 有任何理由不to use <button>

@SandipPingle 没有理由使用它，除非您需要一些非常复杂的样式。此外，IE6 和 IE7（幸运的是已被淘汰）在某些情况下会错误地处理 <button>s。此外，<button> 并非 100% 跨浏览器兼容，因为不同的浏览器可能会在表单中使用相同的 <button> 时提交不同的值。

这是一个很好的答案，但它不是一个特殊性。 <button> 标签中type 属性的默认值为submit。当更改为 type=button 时，<button> 没有默认行为。在此处查看type 属性：developer.mozilla.org/en-US/docs/Web/HTML/Element/button

【参考方案3】：

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

一些reference material

【讨论】：

用<input type="button" />就够了，用return false;就够了——没必要两个都用。

我不同意建议不要使用按钮标签。如果您不使用它，您将失去一些可通过按钮标签自动获得的辅助功能。我想说按钮标签实际上推荐用于充当按钮的元素。

根据您链接的参考资料中的注释：“虽然 button 类型的 元素仍然是完全有效的 HTML，但较新的 元素现在是创建按钮的首选方式。 "所以这与你所说的完全相反。

【参考方案4】：

戴夫马克尔是正确的。来自W3School's website：

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

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

【参考方案5】：

默认情况下，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

【参考方案6】：

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

【参考方案7】：

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

<form onsubmit="return false;">

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