HTML按钮不要提交表格

268

我有一个表格。在表格之外，我有一个按钮。一个简单的按钮，像这样：HTML按钮不要提交表格

<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>

来源

2010-05-13 arik

此问题在现代浏览器中无法重现，并且问题最初可能是由于误解造成的。虽然'button'的默认值是'type = submit'，但'button'元素不在任何表单之外时，不会提交表单。除非可以给出实际演示（样本文件，浏览器标识和表明提交某种表格的观察说明），否则应该关闭此问题，因为这是不可重现的。使用'type = button'是很好的做法，但这并不能解决问题。 – 2014-10-05 11:46:32

656

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

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

来源

2010-05-13 10:03:05

@Powerslave任何理由不'使用

@SandipPingle没有理由使用它，除非你需要一些非常复杂的样式。另外，IE6和IE7（幸运的是被淘汰）在某些情况下不正确地处理'

这对MVC5视图中的我无效。 – Chazt3n 2015-07-23 15:39:28

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

来源

2010-05-13 10:02:28 ThiefMaster

我想这个答案只适用于javascript启用？ – Konerak 2010-09-08 06:36:26

不提交表单的按钮只有在启用JavaScript的情况下才有用......我同意type =“button”虽然更清晰。 – ThiefMaster 2010-09-09 01:36:32

'return false;'在所有情况下都不起作用，而'type =“Button”'做。即使启用了JavaScript。 – brejoc 2014-09-11 14:57:27

这里建议你不要使用<Button>标签。改为使用<Input type='Button' onclick='return false;'>标记。（使用“返回false”确实应该不发送的形式。）

一些reference material

来源

2010-05-13 10:11:38 Tim

使用''就足够了''返回false;' - 不需要两者兼而有之。 – Tom 2012-08-10 01:50:36

我不同意建议不要使用按钮标签。如果你不使用它，你会失去一些辅助功能，你会自动使用按钮标签。我会说按钮标签实际上是推荐用作按钮的元素。 – CookieMonster 2017-06-30 12:01:50

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

总是指定按钮的类型属性。 Internet Explorer的默认类型是“按钮”，而其他浏览器中的（和规范中的W3C ）则是“提交”。

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

来源

2010-05-13 10:28:54

默认情况下，html按钮提交表单。

这是由于这样的事实，位于一个形式充当提交者（请参考w3School网站：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

来源

2016-11-20 12:02:00 GJZ

对于可访问性r艾森，我不能用多个按钮来实现它。使用多个按钮form本机工作的唯一方法是使用多个按钮，但只能使用您可以在点击Enter密钥时提交表单，以确保其中只有一个是type=submit而其他类型是type=button。通过这种方式，您可以在键盘支持方面获得更好的用户体验，以处理浏览器上的表单。

来源

2017-07-25 10:32:50 motss

HTML按钮不要提交表格

回答

相关问题