我有一张表格。在表单的外面,我有一个按钮。一个简单的按钮,像这样:

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

当前回答

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

<form onsubmit="return false;">

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

其他回答

出于可访问性的原因,我无法使用多个type=submit按钮来实现它。如果表单有多个按钮,但只有一个按钮可以在按Enter键时提交表单,那么唯一的方法是确保其中只有一个按钮是type=submit,而其他按钮是type=button等其他类型。通过这种方式,在浏览器上处理表单时,您可以从键盘支持方面获得更好的用户体验。

在游戏的后期,但您不需要任何JavaScript代码来使用按钮作为按钮。默认行为是提交表单,大多数人没有意识到这一点。类型参数有三个选项:submit(默认)、button和reset。这很酷的一点是,如果您添加了事件处理程序,它将绕过提交表单。

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

返回错误;在onclick处理程序的末尾将完成这项工作。然而,最好是简单地将type="button"添加到<button> -这样即使没有任何JavaScript,它也能正常工作。

我认为这是HTML最烦人的小特点……该按钮需要为“button”类型,以便不提交。

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

2019年2月5日更新:根据HTML生活标准(以及HTML 5规范):

缺少的值default和无效的值default是Submit 按钮的状态。

建议不要使用<Button>标签。使用<Input type='Button' onclick='return false;'>标签代替。(使用“return false”确实不应该发送表单。)

一些参考资料