Country selection

This document is a utility for people creating HTML forms and needing code for letting the user select a country. It also discusses some general problems with large menus.

Selecting a selection of countries

Listing countries is partly a matter of political dispute. The list here is based on a document listing country names and codes (now removed) at the IANA site. The version used here carried a last update date of 1997-08-07. No attempt was made by me to check its detailed compatibility with the most recent content of the ISO 3166 standard. However, note that there is now an official Web site on ISO 3166. You may also wish to take a look at Cross-Reference List of Country Data Codes in the CIA World Factbook for a US view of the situation.

It is questionable whether a select menu is really the way to let the user specify a country. Perhaps it would be easiest to ask the user type the two-letter ISO 3166 code, naturally providing a link to a page that lists those codes. It's probably faster to type two letters than to make a menu selection, and people can be expected to know or learn their country code.

A list of countries, for use in HTML

The list itself is available as an HTML fragment containing just a set of OPTION elements, with VALUE attribute giving the two-letter ISO 3166 country code, e.g.

<option value="AF">Afghanistan

They are preceded by a "dummy" option, for reasons explained below.


Naturally, you need to put the list of options into a SELECT element which is inside a FORM element. The following example uses SELECT with SIZE="8" instead of letting SIZE default to 1, for reasons explained below. You may wish to test how such a SELECT element works on your browser; submitting this form causes just a simple echo page to be shown, indicating the country selection that was made.


The importance of dummy and neutral options

The list contains a default dummy selection and a selection for answering "no country", for reasons explained in Choices in HTML forms. Note that these are logically distinct cases:

The latter leads us to another point: When asking a user to select a country, you should make it clear what you are asking him to tell. His current nationality? Permanent residence? Current location? Perhaps country of birth? The country where his company has its headquarters? These could all be different.

When asking the user to select a country, specify what the question means (e.g., "country where you currently live"). Provide at least one way of telling "no country", and make sure you can distinguish between that answer and lack of any answer.

Problems with large menus

If one uses a SELECT element containing a large number of options (240 in this case), without a SIZE attribute, the presentation is not user-friendly in many browsing situations. In particular, on Unix versions of Netscape the user needs to make the selection so that the mouse button is kept pressed down, and the start of the list remains then visible, with "More..." as the last alternative; selecting that one gets a new list with next options etc. For a large list, this is very awkward.

Using a SIZE attribute with a value greater than 1 helps. It typically changes the way the SELECT element is displayed, from "drop-down menu" to "scrolled list box". Below see, for comparison, two versions of the country menu, with SIZE values of 1 and 2, as displayed on your browser:

Even when a SIZE attribute is used, a large set of options can annoy users: it takes some time to scroll down a long list. It is true that on several browsers, by typing a letter the user will get to the first option which begins with that letter (e.g. by typing i one would make Iceland selected, and then you would need just a little scrolling to select any country with a name beginning with I). But it is also true that many users don't know that. If you intend to give instructions, don't write them as absolute, since they aren't. Instead, you could write: On several browsers, such as Internet Explorer and Netscape, you can... and continue with text like the above, with the example replaced by one that is suitable for the particular case. Note: In some cases (though not for the country list) you can affect the usefulness of this method by your selection of the texts in the option elements.

I have written an alternative construct using radio buttons. There are problems with it though:

This document is part of my material on HTML forms.

Date of last update: 2002-06-22.

Jukka Korpela.