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

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?

Solution 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.

Solution 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.

Solution 3:

<button> has default type = "submit" it means if it is within a form element it it will try to submit the form. You can bind your click event to it and perform some action.

<button type="button"> means it is a normal button and you have to bind click event to it to do some action.