javascript - What's the point of <button type="button">?

Question

Is <button type="button> any different from a simple <button> with a blank or missing type attribute? MDN and the HTML5 spec say that type=button is for buttons whose purpose is to trigger custom JavaScript, but isn't that also what a <button> does by default?

Answer 1

Yep, there's a reason - but (usually) only if you're in a <form> element.

If you include a button in a form element without specifying it's just a regular button, it defaults to a submit button.

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

vs

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

The first one is assumed to be type=submit since a type attribute hasn't been specified.

---

If you are not in a <form> element, the button won't have anything to submit, so it doesn't matter as much. :)

Semantics usually become important at some point in your application's lifetime, though, so it's a good idea to make a habit of specifying the type.

---

The only other reason that could be relevant is if there's a styling rule that specifies [type=button] or something. That's not recommended, though.