A SELECT form field bad practice, and 4 ways of fixing it

The firestarter

Yesterday, a younger colleague of mine and extremely talented designer, shared his latest mockup on our Basecamp.

As always, it was beatiful and well balanced… until my heart suddenly started to bleed while my inner Caesar was screaming: “Et tu, Brute?”

This is what I tweeted shortly after:

Challenge accepted

Over the years, I ofter found myself having to explain to interns and young colleagues why this:

it’s in fact always a bad practice, and how to avoid it in a bunch of different situations.

This time I’m trying to explain my opinion on the topic once and for all, really just hoping to end up having a handy link to point people to when needed.

Why Choose one... is bad

Let’s examine the following HTML code:

<select name="icecream">
	<option value=" ">Choose one...</option>
	<option value="banana">Banana</option>
	<option value="cream">Cream</option>
	<option value="smurf">Smurf</option>
</select>

The problem is, that first option doesn’t have any purpose which is suitable for an option.

That first Choose one... option is there just to make you choose the actual option you wanted to choose in the first place!

This is madness!

This is madness, and I promise you no Spartan ain't going to kick me in a well for writing it.

It doesn’t make any sense to have it as an option.

Making you want to choose an <option>, is the job of a <label>. Not of another <option>.

And how to fix it

The basics

The first rule of the Fight the Choose one... madness Club is you always talk about it and you also use a <label>.


<label for="icecream">Choose an icecream:</label><br />
<select name="icecream" id="icecream">
	<option value="banana">Banana</option>
	<option value="cream">Cream</option>
	<option value="smurf">Smurf</option>
</select>

The second rule being: if you just have to use the word “Choose”, use it inside the <label>.

Now that we know the basics, let’s see it in action in a couple different scenarios and how you can choose proper first options in each one.

A filter-like <select>, mandatory choice

When the <select> is used to filter a list of possible items, you nearly always have to include a first show them all option.


<label for="superheroes">Show superheroes:</label><br />
<select name="superheroes" id="superheroes">
	<option value="all">All</option>
	<option value="flying">Flying</option>
	<option value="super-force">Super-force</option>
	<option value="super-sight">Super-sight</option>
</select>

Notes:

  1. The value of the show them all <option> could also be empty. It depends on your backend implementation and coding style.
  2. Since in this example the choice is mandatory, having the show them all option as the first one perfectly fits the requirement.
    A don’t actually filter anything option is often a good default one in such a situation.

A filter-like <select>, not mandatory choice

Ok, I cheated.

The first example is valid in both cases.
It doesn’t really matter if the choice is mandatory or not: when you have a filter-like <select>, you can always avoid using the dreadful Choose one... first option and stick with the winning label + show-them-all first option combo.

A simple choose-one <select>, mandatory choice

When the <select> is used inside a form to make you choose one out of some possible options, things can get tricky for the inexperienced Padawan.

Good for us all I’m writing this very blog post.

Consider this:


<label for="opponent">Choose your opponent:</label><br />
<select name="opponent" id="opponent">
	<option value="godzilla">Godzilla</option>
	<option value="optimus_prime">Optimus Prime</option>
	<option value="shaq">Shaq</option>
	<option value="batman">Batman</option>
	<option value="chuck_norris">Chuck Norris</option>
	<option value="indiana_jones">Indiana Jones</option>
</select>

If Godzilla is the default opponent you want poor human fighters go against every time, your job here is done.

But you could also be a bit less evil and let those warriors try themselves against Indiana Jones by default – beware that gun, though!

Nothing easier than that. Just add a selected="selected" attribute (or just selected) to the desired <option>:


<label for="opponent">Choose your opponent:</label><br />
<select name="opponent" id="opponent">
	<option value="godzilla">Godzilla</option>
	<option value="optimus_prime">Optimus Prime</option>
	<option value="shaq">Shaq</option>
	<option value="batman">Batman</option>
	<option value="chuck_norris">Chuck Norris</option>
	<option value="indiana_jones" selected="selected">Indiana Jones</option>
</select>

Et voilà! Indy is the first opponent.

A simple choose-one <select>, not mandatory choice

Now what if the choice is not mandatory, what if I can skip it and walk away without fighting vs anyone?

You add a Monty Brewster option and call it a day.

None of the above

Sometimes a choice can be a non-choice – Confucius.

Wait, what’s a Monty Brewster option?

The following is a simple choose-one <select> with a not mandatory choice, which uses a Monty Brewster option instead of a that bad bad bad Choose one… option.


<label for="opponent">Choose your opponent:</label><br />
<select name="opponent-2" id="opponent-2">
	<option value=" ">None</option>
	<option value="godzilla">Godzilla</option>
	<option value="optimus_prime">Optimus Prime</option>
	<option value="shaq">Shaq</option>
	<option value="batman">Batman</option>
	<option value="chuck_norris">Chuck Norris</option>
	<option value="indiana_jones">Indiana Jones</option>
</select>

Notes:

  1. Just like above, the value of the Monty Brewster <option> can be anything you want. It depends on your backend implementation and coding style.
  2. If you want to be super-sure that any browser will always render your desired option as the default one, just add the selected="selected" attribute.

Closing thoughts

As I hope to have demonstrated, it is always possible to avoid the use of the Choose one… first option in a <select>.

Using it is cheap, lazy, confusing to newcomers, and now you have this blog post with examples on how to implement the right thing.

What do you think about it?
Did you find a use case I forgot to cover?

Let me know on Twitter, or leave a comment below.

And if you are just starting with HTML (and CSS), I’m writing an ebook you might be interested in: