Working with Lists

A list displays a number of options from which the visitor can choose, as in Figure 68.5. Lists are better than radio buttons or checkboxes if the number of options is rather large, since lists make better use of space.

The size attribute of the list's select tag determines how many options are visible at once. If the list contains more options than this number, the browser adds a scrollbar to the right side of the list.

Listing 68.6. View Source for Figure 68.6.

 <form>   <table>     <tr>       <td>Select the newsletter you would like to receive:</td>     </tr>     <tr>       <td><select name="newsletterList" size="5">           <option value="news">News</option>           <option value="sports">Sports</option>           <option value="business">Business</option>           <option value="entertainment">Entertainment</option>           <option value="humor">Humor</option>           <option value="style">Style</option>           <option value="travel">Travel</option>           <option value="science">Science</option>           <option value="culture">Culture</option>         </select></td>     </tr>   </table> </form> 

Figure 68.6. Organize a large number of choices in a list.

Each option in the list gets its own option tag. The value attribute of the option tag contains the data that the Web server receives when the visitor submits the form. So, if the visitor chooses to receive the Culture newsletter, the Web server gets something that looks like this:

 newsletterList=culture 

To allow your visitors to select more than one item from the list, add the multiple attribute to the select tag:

 <select name="newsletterList" size="5" multiple> 

FAQ

How do you select multiple options from a list?

Your visitors must hold down Ctrl (Windows) or Command (Mac) to select multiple options from a list.

Like the checked attribute, the multiple attribute doesn't have a value. It just appears in the tag.

To preselect an option from the list, add the selected attribute to its tag:

 <option value="news" selected>News</option> 

If you designed your list to accept multiple options, you may have multiple preselected options:

 <option value="news" selected>News</option> <option value="sports" selected>Sports</option> <option value="business" selected>Business</option> 

Otherwise, the browser takes one preselected option and ignores the others. Internet Explorer defaults to the first selected option, while Netscape defaults to the last.