Forms: SELECT

[Previous] [Next] [Contents] [Glossary] [Index] [Quiz] [HTML Lab]
Progress: 8/10

Text inputs and buttons to select are all very nice, but they clutter up the screen and get a little boring after a while. What's an author to do? Break up the monotony of your forms with the SELECT tag! You'll be glad you did.

SELECT

Let's say you want to have your readers indicate which country they live in. You could create a radio-button input listing all two-hundred-plus countries in the world, but that would obviously take up a lot of space on the screen. How can you avoid this unsightly mess?

Well, you could try using a SELECT list. This will create a pop-up list from which any one option may be selected. The advantages are that you still have a list to choose from, but it takes up very little screen space until the user interacts with the list.

Although a list of two hundred countries should probably be contained in a list such as is described below, be aware that some browsers will not be able to handle displaying lists that long. This is not due to any limitations in HTML, but instead to sloppy programming on the part of those who wrote the browsers. Test long lists extensively, in multiple browsers, before unleashing them on the general public; also realize that there are alternatives, which will be discussed later in the chapter, to pop-up lists.

I'm not actually going to use the 'countries of the world' example, because I don't feel like typing in a list that long-- besides which, several countries are in the habit of changing their names every other week, so the list would be continually out of date. Instead, I'll ask the user what kind of connection he's using to get his Internet feed. Select the line "No response" which appears right after this paragraph. 

How are you reaching this page?

As you saw, you can change the current option by selecting the list and moving through it until you get the choice you want. How is this done? The markup: 

   <P>
   How are you reaching this page?
   <SELECT name="access">
   <OPTION>No response
   <OPTION>Compuserve
   <OPTION>America On-Line
   <OPTION>Local ISP
   <OPTION>National ISP
   <OPTION>Straight Internet connection
   <OPTION>Beats me, my kids set up this thingamajig
   <OPTION>None o' yer beeswax
   <OPTION>Other
   </SELECT>
   </P>

There are a few things to mention. First, obviously, is the required presence of a NAME attribute in the SELECT tag; in this case, the NAME is access. Second, almost as obviously, is that SELECT is a container, requiring a close tag (</SELECT>). Third, the size of the list-box is as wide as the longest option in the list. Fourth, the browser will typically set the list to the first OPTION (although there are ways to change this behavior; we'll get to that in a moment). Finally, between the open and close tags of the select list are...

OPTION Tags

Each choice in the select list is defined using the OPTION tag. Note that there is no VALUE attribute throughout the list. That's because the text after the OPTION tag is taken as the value of the selection. So if I were to pick the option "Local ISP," the value of access would be Local ISP. Picking the next-to-last option would set the value to None o' yer beeswax, and so on. Thus, a VALUE= statement is not required.

This does not mean it is forbidden, however. It is still possible to explicitly assign values to some, or all, or none of the options in the list. Let's say that I wanted to set the values of the various choices to be one through eight, with zero for the "No response" choice. In that case, I would set up the following: 

Markup:
   <P>
   How are you reaching this page?<BR>
   <SELECT name="access">
   <OPTION value="0">No response
   <OPTION value="1">Compuserve
   <OPTION value="2">America On-Line
   <OPTION value="3">Local ISP
   <OPTION value="4">National ISP
   <OPTION value="5">Straight Internet connection
   <OPTION value="6">Beats me, my kids set up this thingamajig
   <OPTION value="7">None o' yer beeswax
   <OPTION value="8">Other
   </SELECT>
   </P>

Result:

How are you reaching this page?

Selecting "National ISP" would set access to a value of 4, "Compuserve" would return a value of 1... you get the idea. There is no change in what the user sees in terms of the options presented, but the data returned to the CGI program is definitely different.

You can never use any HTML tags (other than OPTION) within the SELECT container.

The SIZE Attribute

Suppose that we don't want to use a "pop-up" list, but instead want a scrollable list. For example, returning to the 'countries of the world' list, I pointed out that many browsers can't display a pop-up list that long. Instead, we want to use a list where we can't see the whole thing at once, but we can still scroll through it, and are able to see a portion of it at any time.

This is accomplished using the SIZE attribute in the SELECT tag. The number specified by SIZE sets the number of lines of text which are displayed at once. I'll go with a list of the fifty United States of America, mostly because it's a shorter and much more stable list than the list of countries. The following example shows the beginning and end of the list, and what the list looks like: 

Markup:
   <SELECT name="state" size=10>

   [ the 50 states; see the example page for full markup]

   </SELECT>

Result:

In this case, the browser has been told to show 10 lines, so we see twenty percent of the total list at any time (10 out of 50). SIZE can be set to any positive integer, although going past twenty is generally discouraged.

As you have no doubt figured out by now, a SELECT list is functionally equivalent to a radio-button input. The user can only select one choice, and selecting a new choice de-selects the old choice. There is also a type of list which is equivalent to a checkbox input, but it doesn't use a new tag. Instead, it's a variant on SELECT.

The MULTIPLE Attribute

In order to create a list in which multiple selections can be made, simply add the MULTIPLE attribute to the SELECT tag. This will let the user select more than one choice, and in some browsers they'll be able to do range-selections, and so on.

We'll use the list of fifty states again, but this time we'll ask the user to indicate which ones he has visited. 

Markup:
   <SELECT multiple name="state" size=10>

   [ the 50 states; see the example page for full markup]

   </SELECT>

Result:

If you're using a graphical browser, try scrolling around in the list and shift-clicking on different options. Then try control-clicking. Try clicking on already-selected options, using one or the other of the modifier keys. Just like checkboxes, you can select or de-select options at will.

SELECTED

This is all well and good, but isn't there a way to specify a default choice? Yes. Returning to the first example list, the one about access methods, let's assume that I want to make the default choice to be the last option, "Other." However, I don't want to move it to the top of the list for some reason. In that case, I would simply use the attribute SELECTED. Thus: 

Markup:
   How are you reaching this page?
   <SELECT name="access">
   <OPTION>No response
   <OPTION>Compuserve
   <OPTION>America On-Line
   <OPTION>Local ISP
   <OPTION>National ISP
   <OPTION>Straight Internet connection
   <OPTION>Beats me, my kids set up this thingamajig
   <OPTION>None o' yer beeswax
   <OPTION selected>Other
   </SELECT>

Result:

How are you reaching this page?

Obviously, only one SELECTED should be used in a normal SELECT list, whereas you could use SELECTED on many different options in a SELECT MULTIPLE list.

Chapter 7 Quiz
Next-- Chapter 8: Forms Cleanup
Previous -- Chapter 6: Forms: INPUT, Part II
Table of Contents
Tutorial Glossary
Tutorial Index
The HTML Laboratory