Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

344 LESSON 12: Designing Forms

submitted to the server as the value associated with the Courses field instead of Basket

Weaving 499:

<select id="courses" >

<option value="p101">Programming 101

<option value="e312">Ecomomics 312

<option value="pe221">Physical Education 221

<option value="bw499">Basket Weaving 499

</select>

To select an option by default, include the selected attribute in an option element, as

follows:

<select id="courses">

<option value="p101">Programming 101</option>

<option value="e312">Ecomomics 312</option>

<option value="pe221" selected>Physical Education 221</option>

<option value="bw499">Basket Weaving 499</option>

</select>

The closing </option> tag is not required. You can use it or

leave it off, your choice.

NOTE

Thus far, you’ve created menus from which a user can select only one choice. To enable

users to select more than one option, use the multiple attribute:

<select id="courses" multiple>

A user can choose multiple options by Shift-clicking to select sev-

eral in a row, or Ctrl-clicking (Windows) or Cmd-clicking (OS X) to

select several different items.

NOTE

There are some usability issues associated with select lists. When you think about it,

select lists that enable users to choose one option are basically the equivalent of radio

button groups, and select lists that allow multiple selections are the same as check box

groups. It’s up to you to decide which tag to use in a given circumstance. If you need to

present the user with a lot of options, select lists are generally the proper choice. A select

list with a list of states is a lot more concise and usable than a group of 50 radio buttons.

By the same token, if there are four options, radio buttons probably make more sense.

The same rules basically hold with check box groups versus multiple select lists.