Creating Forms
The <select> Tag: Multiple Choice Boxes
What if we have a long list of items, and want to allow our users to select as many or as few of those items as they like? By simply adding size and multiple attributes to our beginning <select> tag, we can transform it from a pulldown menu to a multiple choice box:
<select size="6" multiple="multiple">
By default, size is set to “1,” which creates a pulldown menu:
Setting size to numbers larger than one creates a box that many rows deep. A multiple choice box with a size of “4″ would be four rows deep, for example:
Don’t worry if your list is bigger than your box; if you have ten options but your size is set to “5,” your users will see the first five options on your list, and be able to scroll down to see the rest.
The multiple attribute doesn’t change the appearance of the multiple choice box; it just lets your users select more than one option from the list. On PCs, this is done by holding down the “Control” key while clicking options; on Macs, users click while holding the “Command” key.
Suppose you want to create a list of different sports at your local high school, and let users tell you which sports they’d like to get scores for. Here’s how the code would look:
<select size="7" name="hs_sports" multiple="multiple"> <option>Football</option> <option>Baseball</option> <option> Basketball</option> <option>Softball</option> <option>Volleyball</option> <option>Track</option> <option>Cross-Country</option> <option>Swimming</option> <option>Diving</option> <option>Water Polo</option> </select>
A Web browser would display that code like this:
Multiple choice boxes can be tricky for your users. There’s no visual cue to tell them they can pick more than one option, so you’ll have to provide text that explains how to use the box. If this is too much of a hassle for you, consider avoiding multiple choice boxes altogether. As with the “Reset” button, just because HTML has a function doesn’t mean you should necessarily use it for your site.
Try it Yourself
Make your own tweaks or additions to the code in the left box below, then click “Show Changes” to see the results in the right box.
|
|