Lesson 16: Further user input - selections and optiongroups
This lesson covers user input by selection from options. All such selection functionality is coded using outermost select tags, thus:
|
1.
|
<select>
|
|
2.
|
... some_markup ...
|
|
3.
|
</select>
|
|
|
Inside the select tags one places any combination of 'option' and 'optgroup' elements. The simplest type of selection element just contains several option elements, eg:
|
1.
|
<select>
|
|
2.
|
<option>Choice 1</option>
|
|
3.
|
<option>Choice 2</option>
|
|
4.
|
</select>
|
|
|
Although browsers differ in how they present these options, basically the user will be given a list of the strings 'Choice 1' and 'Choice 2', from which he can select one.
The option elements can take a number of attributes:
|
value
|
- a string which can be important in reference to some attributes of the select object (see below)
|
|
onpick
|
- allows you to specify the id of a card to navigate to when you pick this option
|
|
title
|
- gives a title to this option , which some browser may use to display the option
|
To provide more complicated actions than available via onpick, such as passing variables to the server or altering the value of variables, we need to embed an <onevent> element inside the option:
|
1.
|
<onevent type="onpick">
|
|
2.
|
<go href="#card2"/>
|
|
3.
|
</onevent>
|
|
|
One can provide more complicated select elements by using the 'optgroup' element (though this is not supported by the Microsoft microbrowser). It is used to collect together a number of different option elements. When the user is first presented with the selection object, he is shown a list of the titles of the optgroup elements (along with any option elements not enclosed in optgroups). Choosing one of these optgroup titles then takes him to the list of options held by the chosen optgroup element. Such a selection element may be coded something like this:
|
1.
|
<select>
|
|
2.
|
<optgroup title="first_choices">
|
|
3.
|
<option>Choice 1</option>
|
|
4.
|
<option>Choice 2</option>
|
|
5.
|
</optgroup>
|
|
6.
|
<optgroup title="second_choices">
|
|
7.
|
<option>Choice 3</option>
|
|
8.
|
<option>Choice 4</option>
|
|
9.
|
</optgroup>
|
|
10.
|
</select>
|
|
|
The select element takes a number of attributes that govern its behaviour:
|
title
|
- used by some browsers for presentation purposes.
|
|
name
|
- used in association with the 'value' attribute of option elements. Specifies a variable which gets assigned the value string of the option chosen.
|
|
iname
|
- specifies a variable which has the index number of the option chosen (the index number of the ith option element specified is i).
|
|
value
|
- the option which has this value string is set as the default choice
|
|
ivalue
|
- the option with this index number is set as the default choice
|
|
multiple
|
- either "true" or "false" (the default). If true, the user can make multiple selections
|
|
tabindex
|
- specifies the order in which select element receives the focus when the user presses the 'tab' key
|
The following code provides examples of the use of select elements.
|
1.
|
<?xml version="1.0"?>
|
|
2.
|
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML
1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
|
|
3.
|
<wml>
|
|
4.
|
<card id="card1" title="Welcome">
|
|
5.
|
<p>
|
|
6.
|
Selection 1:
|
|
7.
|
<select iname="option1" ivalue="1">
|
|
8.
|
<option>meat</option>
|
|
9.
|
<option>vegetables</option>
|
|
10.
|
<option>Dairy products</option>
|
|
11.
|
</select>
|
|
12.
|
Pizza Toppings
|
|
13.
|
<select name="option2" value="pep" multiple="true">
|
|
14.
|
<optgroup title="Meat">
|
|
15.
|
<option value="pep">Pepperoni</option>
|
|
16.
|
<option value="chi">Chicken</option>
|
|
17.
|
<option value="bee">Beef</option>
|
|
18.
|
<option value="por">Pork</option>
|
|
19.
|
</optgroup>
|
|
20.
|
<optgroup title="vegetables">
|
|
21.
|
<option value="oni">Onions</option>
|
|
22.
|
<option value="per">Peppers</option>
|
|
23.
|
<option value="chi">Chillies</option>
|
|
24.
|
<option value="mus">Mushrooms</option>
|
|
25.
|
</optgroup>
|
|
26.
|
</select>
|
|
27.
|
</p>
|
|
28.
|
</card>
|
|
29.
|
</wml>
|
|
|
Nokia
| 
Nokia
|
|
