代码之家 › 专栏 › 技术社区 › arik

不提交表单的HTML按钮

html javascript

316

arik · 技术社区 · 14 年前

我有一张表格。在那张表外面,我有一个按钮。一个简单的按钮,如:

<button>My Button</button>

不过,当我单击它时,它会提交表单。代码如下:

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

所有这些按钮应该做的是一些JavaScript。但即使在上面的代码中看起来很像,它也会提交表单。当我将“标记”按钮更改为“范围”时,它工作得很好。但不幸的是,它需要一个按钮。有没有办法阻止那个按钮提交表单?比如说

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

6 回复 | 直到 5 年前

778

jpp 5 年前

我认为这是HTML最讨厌的一个小特性…该按钮必须是“button”类型才能提交。

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

更新日期:2019年2月5日: 按照 HTML Living Standard (还有) HTML 5 specification ):

这个 缺少默认值 和 无效值默认值 是否提交按钮状态。

ThiefMaster 10 年前

return false; 在onclick处理程序结束时,将执行该任务。不过,最好简单地加上 type="button" 到 <button> -这样,即使没有任何javascript,它也能正常运行。

Gert Grenander Keiron Lowe 14 年前

戴夫·马克尔是对的。从 W3School's website :

始终为指定类型属性按钮。的默认类型 Internet Explorer是“按钮”,而在其他浏览器中(在W3C中规范)为“提交”。

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

GJZ 8 年前

默认情况下,HTML按钮提交表单。

这是因为即使表单外部的按钮也充当提交者(请参见W3Schools网站: http://www.w3schools.com/tags/att_button_form.asp )

换句话说,按钮类型默认为“提交”。

<button type="submit">Button Text</button>

因此,解决这个问题的一个简单方法是使用 按钮式 .

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

其他选项包括在点击或单击按钮时的任何其他处理程序,或改用<input>标记

要了解更多信息,请查看Mozilla Developer Network的按钮信息: https://developer.mozilla.org/en/docs/Web/HTML/Element/button

RevanthKrishnaKumar V. Glen Best 9 年前

建议不要使用 <Button> 标签。使用 <Input type='Button' onclick='return false;'> 而不是标签。(使用“返回错误”确实不应发送表单。)

一些 reference material

motss 7 年前

出于可访问性的原因,我无法用多个 type=submit 按钮。唯一能与本地人一起工作的方法 form 有多个按钮,但是只有点击 Enter 关键是要确保其中只有一个是 类型=提交 而其他的则是其他类型,如 type=button . 通过这种方式,您可以从更好的用户体验中受益,在键盘支持方面,您可以在浏览器上处理表单。