Wireless Markup Language (WML) Tutorial

The input Element

The input element may be used to get text from the user. The text may be either entered as straight text, or as a password where each character extered is replaced with an asterisk *. The following table shows the attributes that may be used with the input element.

<input type="text" name="username" emptyok="false"/>

<input type="text" name="username" format="10M"/>

<input type="text" name="amount" format="*N"/>

<input type="text" name="username" maxlength="20"/>

<input type="text" name="username"/>

<input type="text" name="username" size="10"/>

<input type="text" name="username" title="Login name"/>

<input type="password" name="pw"/>

<input type="text" name="username" value="anonymous"/>

Variables

Variables are stored in WML prefixed with a dollar sign. The name attribute for the input element can be referred to by putting a $ in front of the name. The variable may be passed to another card in the current deck, or a card in another deck.

The following example links to a card in the same deck.

The next example links to a different deck. The first card in the deck will be selected.

<do type="accept" label="Juicy Studio">
    <go href="deckname.wml"/>
</do>

The next example links to a card in a different deck.

<do type="accept" label="Juicy Studio">
    <go href="deckname.wml#cardname"/>
</do>

The following example uses an input element to get the name of the user, assigned to "name". The name is then displayed when the Index card is displayed, by referring to variable as $name.

input.wml

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
    "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="start" title="Juicy Studio">
<do type="accept" label="Juicy Studio">
    <go href="#index"/>
</do>
<p>
    Please enter your name:
    <input type="text" name="name" value="anonymous"/>
</p>
</card>
<card id="index" title="Welcome">
<p align="center">
    Juicy Studio<br/>
    <img src="images/smile.wbmp" alt="Smile" width="20" height="20"/><br/>
    W@P<br/>
    Welcome, $name
</p>
</card>
</wml>

Output From Program

The following shows the output from the above script. In this example, the accept type has been rendered with an Options button on the device. When the options button is pressed, the three choices are displayed. When the card has been selected, the Back button has been rendered on the device.

The select Element

The select element allows you to specify a list of options with the option element. The following table shows the attributes that may be used with the select element.

The option Element

The option element is used with the select element to define the choices available. The following attributes may be used with the option element.

The following example uses the select element with options to allow the visitor to choose their favourite colour. The colour is then displayed to them when they move on to the main card.

select.wml

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
    "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="start" title="Choose Colour">
<do type="accept" label="Juicy Studio">
    <go href="#index"/>
</do>
<p>
    What's your favourite colour:
    <select name="colour" value="red">
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="blue">blue</option>
    </select> 
</p>
</card>
<card id="index" title="Juicy Studio">
<p>
    Your favourite colour is $colour
</p>
</card>
</wml>

Option Groups

The optgroup element allows you to group options so they are more manageable. The option group contains a list of options that relate to the group. The optgroup element has a single attribute called title, that determines what is displayed on the device to represent the group. The following example illustrates how to use an option group.

optgroup.wml

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
    "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="start" title="Choose Food">
<do type="accept" label="Juicy Studio">
    <go href="#index"/>
</do>
<p>
    What would you like to eat:
    <select name="food">
        <optgroup title="Poultry">
            <option value="Chicken">Chicken</option>
            <option value="Duck">Duck</option>
        </optgroup> 
        <optgroup title="Meat">
            <option value="Lamb">Lamb</option>
            <option value="Beef">Beef</option>
        </optgroup> 
    </select> 
</p>
</card>
<card id="index" title="Juicy Studio">
<p>
    You want to eat $food
</p>
</card>
</wml>

The fieldset Element

The fieldset element allows you to group select or input elements within a card to make navigation simpler. The fieldset has a title attribute. The following example uses fieldsets to group input.

fieldset.wml

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
    "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="start" title="Juicy Studio">
<do type="accept" label="Juicy Studio">
    <go href="#index"/>
</do>
<p>
    <fieldset title="Name">
        Please enter your name:
        <input type="text" name="name" value="anonymous"/>
    </fieldset>
    <fieldset title="Location">
        Where are you from:
        <select name="location" value="UK">
            <option value="UK">UK</option>
            <option value="overseas">overseas</option>
        </select> 
    </fieldset>
</p>
</card>
<card id="index" title="Welcome">
<p align="center">
    Juicy Studio<br/>
    <img src="images/smile.wbmp" alt="Smile" width="20" height="20"/><br/>
    W@P<br/>
    Welcome, $name from $location
</p>
</card>
</wml>