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.

Answer 2

The default type for a button is "submit". MDN doesn't talk about it as far as I can see but it is available in the html5 specification.

The missing value default is the Submit Button state.

So setting the type to "button" disables the default behaviour of submitting a form so you won't need to use preventDefault to handle it in javascript.