The reason we specify type="button" for button elements

If you didn't have experience with the web ~10 years or more ago it might be weird to use buttons on the web, especially when you don't want them to trigger form submits. You might have asked yourself: "Why do I need to specify button type to be a button?". Shouldn't that be the default behaviour?

<button type="button">text</button>

Historically, the primary purpose for buttons was submitting and resetting HTML forms. “submit” was always the default type since button elements were used mostly for that purpose, submitting forms.

And we used them like so:

<form action="/send" method="post">
    <input placeholder="Enter your message" />
    <button>Save</button>
</form>

Then as JS evolved and became more and more powerful, people started building dynamic interfaces and apps. HTML buttons needed to follow and mimic the behaviour we see in native apps. There was a new requirement to have them trigger various actions inside the app, even more so than submitting forms. But, at the same time web platform has always been backwards compatible. For that reason, changing the existing HTML element to default to type="button" was not an option.

type="button" was introduced to support "new" behaviour that avoids the default of submitting forms.

The reason we specify type="button" for button elements

Comments

More from this blog

Moved to a new domain

My first thoughts on Next.js 13 and the new app router

JS Date constructor timezone oddity

Testing complex flag conditions and ensuring complete case coverage

Minimal example of file upload using Next.js app router

Command Palette

Comments

More from this blog