<button type="button">的作用是什么？

Question

<button type="button"> 和一个没有 type 属性或空值的 <button> 有什么不同吗？MDN 和 HTML5 规范说，type=button 是用于触发自定义 JavaScript 的按钮，但默认情况下 <button> 也是这样做的，对不对？

- Lassi

Answer 1

是的，有一个原因 - 但通常只适用于您位于 <form> 元素中时。

如果您在表单元素中包含一个按钮，而没有指定它只是一个普通按钮，它将默认为提交按钮。

<form>
    <button>I will submit the form when clicked!</button>
</form>

vs

<form>
    <button type='button'>I won't!</button>
</form>

第一个按钮默认为type=submit，因为没有指定type属性。

---

如果您不在<form>元素中，则该按钮将没有任何内容可以提交，因此这并不重要。 :)

但是，在应用程序的生命周期中，语义通常变得很重要，因此最好养成指定type的习惯。

---

唯一可能相关的另一个原因是如果有一个指定了[type=button]或类似规则的样式。 不过，这并不推荐。

- Ben

Answer 2

按钮的默认类型是“submit”。据我所见，MDN没有提到这一点，但它在HTML5规范中可用。

缺失值的默认状态是提交按钮。

因此，将类型设置为“button”会禁用提交表单的默认行为，因此您无需使用preventDefault来处理它。

- Karl-Johan Sjögren

Answer 3

<button>元素默认的type = "submit"，这意味着如果它在表单元素内，它将尝试提交表单。您可以将点击事件绑定到它上面并执行一些操作。

<button type="button">意味着它是一个普通按钮，您需要绑定点击事件才能执行一些操作。

- K D

Answer 4

还有一个<button type="submit">，当点击时会提交表单。

因此，如果您想使用ajax执行POST请求，最好使用<button type="button">，这样当按钮被点击时就不会提交表单。

- Robin Carlo Catacutan

Answer 5

默认按钮类型实际上是submit。这表明不应该有提交选项，只应该是一个可点击的对象。

- D.N.

Answer 6

关于未指定类型的<button>，我的个人经验是，每当单击它们时，用于保存表单更改的保存按钮会自动禁用，尽管没有实际的提交/发布请求。

这很奇怪，因为每当您尝试上传文件时，在文件选择窗口消失后，您实际上无法保存所做的更改，因此无法上传文件。

保存按钮将正确禁用，因为定义为ng-disabled="form.$submitted"，因此在保存后您无法再次单击它。

我从调试器中看到表单的AngularJS $submitted标志为true并且最近更改了一些内容，从而得知了发生了什么。

我通过将按钮的类型设置为"button"来解决问题，以便它不会触发表单提交状态的更改，因为其默认类型为"submit"，如其他答案所述。

据我研究，<button>元素是在HTML4中引入的，默认类型为submit。

- Mihai Savin