DEV Community

Claire Parker-Jones
Claire Parker-Jones

Posted on

69 10

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

Spoiler

A button with no type attribute acts as type="submit", and will attempt to submit form data when clicked. Be explicit in your intentions and kind to future developers working with your code: provide a type. By specifying either button, submit or reset, the code's purpose is clear and is easier to maintain

Button basics

How do you create a button element with HTML? I often see them written like this:



<button>Press me</button>


Enter fullscreen mode Exit fullscreen mode

This code is valid HTML and passes the W3C markup validation service. However, I believe that the type attribute should always be included on a button. If this attribute is missing, it can introduce potentially confusing behaviour - and there's enough of that to deal with already in web development!

Note: I use the <button> tag instead of the input tag, e.g. <input type=“button” /> when building buttons in HTML. I recommend this because the button tag and is semantically correct for this purpose and it can be easier to style than an input tag.

Type attribute values

HTML tags use key-value pairs, or attributes, to modify their functionality. For example, a commonly used attribute is the class attribute, like on this div element: <div class="foobar"></div>. Each HTML element has its own set of valid attributes.

Buttons allow an optional attribute called "type", which is used to define the purpose of the button. The type attribute can take three values:

  1. submit
  2. button
  3. reset

"submit"



<button type=“submit”>Press me</button>


Enter fullscreen mode Exit fullscreen mode

This button will submit form data. Submit buttons are normally found nested within a form, i.e. a <form> tag.

"button"



<button type=“button”>Press me</button>


Enter fullscreen mode Exit fullscreen mode

This button has no default behaviour. JavaScript must be used to define what happens when it's clicked.

"reset"



<button type=“reset”>Press me</button>


Enter fullscreen mode Exit fullscreen mode

When nested within a form, this button resets form controls to their initial values when clicked.

No type



<button>Press me</button>


Enter fullscreen mode Exit fullscreen mode

After reading the previous definitions, how do you think a button with no type attribute will behave? When the type attribute is missing, the button behaves as a submit button.

This certainly wasn't what I expected - I assumed that a button with no specific type would do nothing when clicked. This can cause problematic behaviour (i.e. bugs!) in your code if, like me, you aren't expecting it.

Button types in action

The following gif shows a simple form (original Codepen below). When the form is submitted, the background colour of the page is changed using JavaScript, by listening to the onsubmit event. Each of the button types mentioned previously are included within the form, and are labelled to show their type value. Notice what happens when each one is clicked:

Different values of type attribute

  • The submit-type button changes the background colour and submits the form, as expected.

  • The button-type button does nothing, as expected.

  • The reset button does nothing, as there aren't any form inputs to reset in this example. This is also expected.

  • The button with no explicit type value submits the form and changes the background color. We expect this after discussing it above, but it still doesn't feel intuitive compared to other the other button types.

Try experimenting yourself with the CodePen here:

Why should you always declare a type attribute?

1) Clear definition of what the button does

When a button doesn't have a type attribute, its usage is unclear. It may be obvious to you when writing the code that the button submits the form. But part of being a good software developer is to write code that is easy to maintain and understand for others. By adding the type attribute, future developers or even Future You can quickly and easily work out the purpose of the button.

2) Avoid bugs

"Why is that form submitting when I click this unrelated button?" Follow this advice and you and anyone who works with your code will never have this bug again:

For any button that doesn't submit or reset form data, add a type attribute of button.

If everyone who wrote HTML understood that buttons act as submit buttons by default, then this advice wouldn't be necessary. Unfortunately not everyone does, so in the meantime, please declare a button type 🙂

Inspired by wtfhtmlcss.

The Fastest, Most Accurate API for Voice AI

Ad Image

Power your Conversational AI with the most accurate real-time speech-to-text API. Available in 50 languages and at <1-second latency. Perfect for building seamless and emotionally intelligent voice experiences.

Start building today 🛠️

Top comments (10)

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 😊

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay