Question

<button type="button>与<button>属性空白或缺失的简单type有什么不同？ MDN和HTML5规范说type=button用于触发自定义JavaScript的按钮，但这不是<button>默认执行的操作吗？

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]或其他内容的样式规则。但不建议这样做。

Answer 2

按钮的默认类型是＆＃34;提交＆＃34;。就我所见，MDN并没有谈论它，但它可以在html5 specification中找到。

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

所以将类型设置为＆＃34;按钮＆＃34;禁用提交表单的默认行为，因此您无需使用preventDefault在javascript中处理它。

Answer 3

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

<button type="button">表示它是一个普通按钮，你必须将点击事件绑定到它才能执行某些操作。

Answer 4

还有<button type="submit">点击时提交表单。

因此，如果您想使用ajax执行POST，那么最好使用<button type="button">，以便在单击按钮时不会提交表单。

Answer 5

默认按钮类型实际为submit。这澄清了应该没有post选项，但只是一个可点击的对象。

Answer 6

我对没有指定类型的 <button> 的个人经验是，无论何时点击它们，用于保存表单更改的保存按钮都会自动禁用，尽管没有实际提交/发布正在提出请求。

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

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

我在调试器中看到表单的 AngularJS $submitted 标志为 true 并且最近发生了变化，我得到了关于正在发生的事情的线索。

我通过将按钮的类型设置为 "button" 解决了这个问题，这样它就不会触发表单的提交状态改变，这是因为它的默认类型已经如所述的 "submit"在其他答案中。

就我的研究而言，<button> 元素是在 HTML4 中引入的，并且 submit 是它的默认类型。