Christian Ross

US States – HTML Select/Options list

The Select tag in HTML is the code used to create a simple drop-down list on the web. In its simplest form, its usage is for organizing a long list of options and allowing a user to click one item from the list. One of the most common usages of it can be found as you fill out a web form and have the ability to select your state from one.

I had that exact need arise this week and can’t actually count on two hands over the years how many times it has come up. The code is easy but with 50 states + options like Washington DC and Canadian provinces it gets a bit tedious to re-type it all. And what’s more, sometimes you just need abbreviations of states and not the full name.

Posting mostly for my future self but in case you need a quick copy/paste down the road I’ve gone through and done up three versions:

US states + DC (full titles)

US states + DC (abbreviations)

US states + DC + Canadian provinces (full titles)

Each includes an id and a class name so you can style to your liking and a tabindex number to remind you that keyboard accessibility is useful.

Text file of all three to copy/paste or save to your computer

Feel free to save to your folder of code snippets or steal directly from here when needed.

Update:

This post has seen a bit of traffic so I figured I’d throw a few more here that I’ve had to do once or twice.

HTML Select codes for Month, Date & Year

Month

Date

Year

Text file of all three to copy/paste or save to your computer

Leave a Reply

Your email address will not be published. Required fields are marked *