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.
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.
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 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.
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.