logo标签列表

HTML按钮不提交表单

javascripthtml
495

我有一个表单。在该表单之外，我有一个按钮。这是一个简单的按钮，如下所示：

<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>
9个回答
1147

我认为这是HTML最烦人的小怪癖...那个按钮需要设置为"type=button"才能避免提交表单。

<button type="button">My Button</button>
更新于2019年2月5日： 根据HTML Living Standard (以及HTML 5规范)的规定：

"丢失值默认值" 和 "无效值默认值" 是指提交按钮状态。

9
有什么理由不使用 <button> 吗，@Powerslave？ - Sandip Pingle
4
除非你需要一些非常复杂的样式，否则没有使用它的理由。此外，IE6和IE7（幸运的是正在逐步淘汰）在某些情况下会错误地处理 <button>。另外，在不同的浏览器中，当<button>在表单中使用时可能会提交不同的值，因此<button>并非完全跨浏览器兼容。 - Powerslave
47
这是一个很好的回答，但它不是一种“特殊情况”。在<button>标签中，type属性的默认值为submit。当将其更改为type=button时，<button>将不会有任何默认行为。请参见此处的type属性：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button - Michael Benjamin
43
在onclick处理程序结尾处添加return false;可以完成任务。但最好只是将type="button"添加到<button>中 - 这样即使没有任何JavaScript，它也可以正常工作。
1
不提交表单的按钮只有在启用JavaScript时才有用...我同意type="button"更加简洁。 - ThiefMaster
5
在某些情况下，return false;无法正常工作，而使用 type="Button"则可以。即使启用了JavaScript也是如此。 - brejoc
33

默认情况下，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，或者改用 < input> 标签。

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

17
戴夫·马克尔说得没错。根据 W3School 网站 的说明：

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

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

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

<form onsubmit="return false;">

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

3
5
只使用<input type="button" />已足够，而且只需要使用return false;，无需两者兼备。 - Tom
我不同意不建议使用button标签的说法。如果你不使用它，你会失去一些自动获得的可访问性功能。我认为button标签实际上是推荐用于充当按钮的元素。 - CookieEater
1
根据你提供的参考资料中的注释：“虽然类型为按钮（button）的输入元素仍然是有效的HTML，但新的<button>元素现在是创建按钮的首选方式。”所以这与你所说的完全相反。 - jedzej
我同意这个答案，但我也能看到使用带有正确类型属性的按钮标签的好处。 - Leslie Krause
1

虽然有点晚了，但是您不需要任何JavaScript代码就可以将一个按钮用作按钮。默认行为是提交表单，大多数人并没有意识到这一点。type参数有三个选项：submit（默认值）、button和reset。有趣的是，如果您添加事件处理程序，它将绕过提交表单。

<button type="button">My Button</button>
1
出于可访问性的原因，我无法通过多个“type=submit”按钮实现它。与多个按钮一起使用表单的唯一方法是，确保其中只有一个按钮是“type=submit”，而其他按钮则是其他类型，例如“type=button”。通过这种方式，您可以从更好的用户体验中受益，在浏览器上处理表单时获得更好的键盘支持。请注意，此过程需要保留html标签。
0

还有一种方法可以防止单击按钮时提交。要实现这一点，您必须使用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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接