HTML and CSS Reference
In-Depth Information
list arrow
selected choice
is highlighted
list of choices
Figure 6-13 Select control.
If you do not specify a size attribute in the <select> tag, only one option is displayed,
along with a list arrow, as shown in Figure 6-13. When the list arrow is clicked, the selec-
tion menu displays all the selection options. When the user selects an option, such as
Pandora, in the list, it appears as highlighted.
To Add a Selection Menu
Table 6-8 shows the HTML code used to create the selection menu shown in Figure 6-13.
Table 6-8 HTML Code to Add a Selection Menu
Line
HTML Tag and Text
39
<p>Favorite Internet radio station:
40
<select name="station">
41
<option>Google</option>
42
<option>Live 365</option>
43
<option>Pandora</option>
44
<option>Slacker</option>
45
</select>
The following step adds a selection menu to the Web page form.
1
Line 39, indented one Tab stop.
Check that the insertion point is on
select start tag
with name of
control
Table 6-8 and then press the e n t e r
key twice (Figure 6-14).
Enter the HTML code shown in
How do I know what control type
to use?
Consider the Web page “real
estate,” together with usability.
If you have 20 options, it may not
make sense to use a select control.
With the four radio station options
it makes sense to use a select
control, as users are familiar with this model. You can also look at the types of controls
other Web developers use, and apply those that make sense for your situation.
four selection
options or choices
start and end
option tags
insertion point
on line 47 and
tabbed twice
Figure 6-14
 
Search WWH ::




Custom Search