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

Luka VidakovicLuka Vidakovic
1 min read

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.

1
Subscribe to my newsletter

Read articles from Luka Vidakovic directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Luka Vidakovic
Luka Vidakovic

Software engineer. Interested in small and efficient tech product teams and ambitious projects that move things forward.