为啥 <button> 也会触发表单提交

Posted 2023-05-08

【中文标题】为啥 <button> 也会触发表单提交

【英文标题】：why <button> also triggers a form submit为什么 <button> 也会触发表单提交

【发布时间】：2015-10-15 12:54:03

【问题描述】：

这是我的测试代码：

<form>
<input type="submit"/>
<button >tt</button>
</form>

<script>

$("form").submit(function()
    console.log("submit");
    return false;
);

</script>

标签按我的预期触发了提交，但不知道为什么 也会触发提交。这是应该做的吗？

如果 应该进行提交，如果我想创建一个带有字形而不是纯文本的按钮，我应该什么时候使用？ PS我正在使用boostrap + jQuery

【问题讨论】：

"一个没有指定类型属性的按钮元素与一个类型属性设置为“提交”的按钮元素表示相同的东西，来自w3c.github.io/html-reference/button.html

【参考方案1】：

HTML <button> 接受 type 属性。而as you can see in the doc，type 的默认值是submit，这就是为什么要提交表单。

你想要的是一个没有默认行为的按钮。只需添加type="button"：

<button type="button">tt</button>

【参考方案2】：

默认behaviour:

“提交”：按钮提交表单。如果未指定属性、HTML5 或动态更改为空值或无效值，则这是默认值。