DEV Community

Why it's important to give your HTML button a type

Claire Parker-Jones on May 01, 2018

Spoiler A button with no type attribute acts as type="submit", and will attempt to submit form data when clicked. Be explicit in your in...
Collapse
 
dance2die profile image
Sung M. Kim

I've seen many Hidden Feature of JavaScript/Python/etc posts but first time seeing an HTML one.
And it has been very helpful 👍.

Thank you Claire 🙇‍

Collapse
 
clairecodes profile image
Claire Parker-Jones

My pleasure! 😊

Collapse
 
qm3ster profile image
Mihail Malo • Edited

Any insight as to why that's the default behavior?
Have they historically been first introduced without this attribute, so their only purpose would be to submit the surrounding form with their value attribute?

Back when I didn't know about this, I also expected the same behavior as you, an inert behavior (thinking that type="submit" was enough of a no-js solution for forms, since "reset" would also have been available since time immemorial)

Collapse
 
litesoft profile image
George

Just wanted to add my appreciation for such a clean and clear post!

Collapse
 
amineamami profile image
amineamami

Thanks for sharing

Collapse
 
x86chi profile image
Muhun Kim • Edited

Thanks for explain 👍 Could you change W3C HTML specification URL to standard version instead working draft?
html.spec.whatwg.org/multipage/for...

also I think it looks good if you quote the following content in the specification:
"The missing value default and invalid value default are the Submit Button state."

Collapse
 
nikitahl profile image
Nikita Hlopov

Great article! Thank you.

Collapse
 
sambhal profile image
Suhail Akhtar

Thanks for the post. I had a button in my Angular app that was causing the form to submit so I added type="button" and it fixed the issue.

Collapse
 
dogbytehurts profile image
dogbytehurts

Dear Mrs Jones,
Your "Spoiler" explanation is clear and concise.
Thank you for your work.

Hope you find the part-time and congrats on the new mum.

Collapse
 
clairecodes profile image
Claire Parker-Jones

Thankyou for your lovely comment, it's made my day 😊