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.