XHTML
MP Selection Lists
A
selection list is a list of options that a user can select. The
<select></select> tags define a selection list in XHTML
MP. One or more <option></option> tag pairs are enclosed
within the <select></select> tags. The <option></option>
tag pair defines a list item.
To
send the value of the selected item to the server, the <select>
tag has to be used in conjunction with the <form> tag. You can
learn how to use the <form> tag and how to read the value of
the selected item at the server later in the "Sending
Data to the Server in XHTML MP" section of this tutorial.
The
name attribute of the <select> tag specifies the name of
a selection list. At the server-side, the name will be used to
retrieve the value of the selected item. The value of an item is
specified with the value
attribute of the <option> tag.
Let's
take a look at the following XHTML MP example. It can help you
understand better what we are talking about.
(selListEg1.xhtml)
<?xml
version="1.0"?>
<!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML
MP Tutorial</title>
</head>
<body>
<form
method="get"
action="xhtml_mp_tutorial_proc.asp">
<p>
<select
name="selectionList">
<option
value="tutorial_A">XHTML MP Tutorial Part
A</option>
<option value="tutorial_B">XHTML
MP Tutorial Part B</option>
<option
value="tutorial_C">XHTML MP Tutorial Part
C</option>
</select>
</p>
</form>
</body>
</html>
The
result of the above XHTML MP example in WAP browsers is shown below.
|
Sony
Ericsson T610
|
Nokia
Mobile Browser 4.0
|
If
you select the selection list, the options available will be
displayed like this:
|
Sony
Ericsson T610
|
Nokia
Mobile Browser 4.0
|
The
selected attribute of the
<option> tag can be used to set the default option. The
default option will be initially selected. The selected
attribute only accepts the value
"selected". Here is an example that shows how to pre-select
the second option "XHTML MP Tutorial Part B":
<option
value="tutorial_B" selected="selected">XHTML
MP Tutorial Part B</option>
Selecting Multiple
Options
In
the previous XHTML MP example, a user can only select one option of
the selection list. To allow a user to select multiple options, you
need to make use of the multiple attribute of the <select>
tag. The multiple attribute can only be assigned with the
value "multiple". Options in such kind of selection lists
are displayed as check boxes on the screen.
Let's
take a look at the following XHTML MP example:
(selListEg2.xhtml)
<?xml
version="1.0"?>
<!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML
MP Tutorial</title>
</head>
<body>
<form
method="get"
action="xhtml_mp_tutorial_proc.asp">
<p>
<select
name="selectionList" multiple="multiple">
<option
value="tutorial_A">XHTML MP Tutorial Part
A</option>
<option value="tutorial_B">XHTML
MP Tutorial Part B</option>
<option
value="tutorial_C">XHTML MP Tutorial Part
C</option>
</select>
</p>
</form>
</body>
</html>
The
result of the above XHTML MP code is shown below:
|
Sony
Ericsson T610
|
Nokia
Mobile Browser 4.0
|
When
the multiple attribute is
present in the <select> tag, it is possible to specify
multiple default options. To do so, add selected="selected"
to each of the <option> tags that should be selected by
default. Here is an example:
<select
name="selectionList" multiple="multiple">
<option
value="tutorial_A" selected="selected">XHTML
MP Tutorial Part A</option>
<option value="tutorial_B"
selected="selected">XHTML MP Tutorial Part
B</option>
<option value="tutorial_C">XHTML
MP Tutorial Part C</option>
</select>
The
above lines of code tell the WAP browser that the first and second
options of the selection list should be pre-selected.
Organizing Options
in XHTML MP Selection Lists
If
an XHTML MP selection list contains too many options, it will look
disorganized. To tackle this, you can arrange options into groups.
You define an option group using the <optgroup></optgroup>
tag pair. The label attribute
of the <optgroup> tag specifies the title of an option group.
The
usage of the <optgroup></optgroup> tags is shown in this
XHTML MP example:
(selListEg3.xhtml)
<?xml
version="1.0"?>
<!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML
MP Tutorial</title>
</head>
<body>
<form
method="get"
action="xhtml_mp_tutorial_proc.asp">
<p>
<select
name="selectionList">
<optgroup
label="Tutorial Ch1">
<option
value="tutorial_1A">Part 1A</option>
<option
value="tutorial_1B">Part 1B</option>
<option
value="tutorial_1C">Part
1C</option>
</optgroup>
<optgroup
label="Tutorial Ch2">
<option
value="tutorial_2A">Part 2A</option>
<option
value="tutorial_2B">Part 2B</option>
<option
value="tutorial_2C">Part
2C</option>
</optgroup>
<optgroup
label="Tutorial Ch3">
<option
value="tutorial_3A">Part 3A</option>
<option
value="tutorial_3B">Part 3B</option>
<option
value="tutorial_3C">Part
3C</option>
</optgroup>
</select>
</p>
</form>
</body>
</html>
This
is the result of the above XHTML MP example in WAP browsers:
|
Sony
Ericsson T610
|
Nokia
Mobile Browser 4.0
|
|
Feedback Form (ExpandCollapse)
|
|
