HTML and CSS Reference
In-Depth Information
figure 6-32
list box for listing the information source
five options are
displayed in the
selection list
Trouble?
Depending on your browser, you might not see a scroll bar next to the
list of options.
Allowing for Multiple Selections
In the code you just entered, customers were limited to a single option. However, Alice
is aware that a customer could have heard about Red Ball Pizza from more than one
source. She would like customers to be able to select more than one option if applicable.
Multiple selections can be applied to a selection list by adding the
multiple
attribute to
the
select
element as follows:
<select multiple=”multiple”> … </select>
As with the
selected
attribute discussed earlier, you also can apply the
multiple
attribute without an attribute value and most browsers will interpret it correctly.
There are two ways for users to select multiple items from a selection list. For noncon-
tiguous selections, users can press and hold the Ctrl key (or the command key on a Mac)
while making the selections. For a contiguous selection, users can select the first item,
press and hold the Shift key, and then select the last item in the range. This selects the
two items as well as all the items between them.
If you decide to use a multiple selection list in a form, be aware that the form sends
a name/value pair to the server for each option the user selects from the list. Verify that
your server-based program can handle a single field with multiple values before using a
multiple selection list.
You'll add the ability to select multiple options to the
infoSrc
field you just created.
To allow for multiple selections:
◗
1.
Return to the
survey.htm
file in your text editor and then add the following text
to the
label
element for the
infoSrc
selection list:
<br />(select all that apply)
◗
2.
Add the attribute
multiple=”multiple”
to the
select
element. Figure 6-33
highlights the newly added code.
figure 6-33
allowing for multiple selections
revised label text
users can select multiple options
