Sitemap

Be a good developer, add a type to your HTML button.

2 min readJan 15, 2019

Be a good developer, add a type to your HTML button.

Why is a type attribute important on your HTML <button> element?

Without specifying a type your awesome button defaults to type="submit", which as the attribute suggest causes a submit event if the button is inside a <form> element… I’m looking at you .net developed sites.

Whats the solution then… well you have 3 options to choose from for the type="” attribute:

  1. submit if you need to submit a form
  2. reset if you need to reset a form
  3. button if you need a generic no-frills clickable button that does nothing else (until you assign it something via JavaScript)

99.999999999% of the time I’m going to say you will be using type="button", especially if your an amazing frontend developer who cares if they need to use a button or a link in their frontend code.

As simple as this seems, on a `lot of the projects I have worked on each and everyone has had a bug raised at some point which ends up being related to a non-specified type attribute.

This also means you don't have to worry about return false; for onclick events or event.preventDefault();

Have I missed something important in this article or said something that is wrong? Please comment/message me and let me know.

--

--

Sean Elliott
Sean Elliott

Written by Sean Elliott

Frontend Developer with a passion for accessibility.

No responses yet