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?

Answers:

Answer

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

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.

Answer

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

Answer

There's also <button type="submit"> where it submits a form when clicked.

So if you want to perform a POST using ajax, that's the best to make use of <button type="button"> so it would not submit the form when the button is clicked.

Answer

The default button type is actually submit. This clarifies that there should be no post option, but just be a clickable object.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.