Wireless Markup Language (WML) Tutorial

Getting User Input

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.

Attributes for the input Element
Attribute Description
emptyok

Determines whether or not the field is optional. The possible value are true or false.

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

Specifies a format mask to use for the entry using the following masks.

  • A - Uppercase character
  • a - Lowercase character
  • N - Number (0 - 9)
  • X - Uppercase character or number
  • x - Lowercase character or number
  • M - Uppercase character changeable to lowercase or number
  • m - Lowercase character changeable to uppercase or number

If a format mask isn't provided, the user may enter as many characters or digits as required. A number may be provided to limit the number of characters entered. An asterisk allows any amount of characters to be entered. The following example limits the entry to 10 characters:

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

The next example allows the user to enter as many digits as they like:

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

Limits the number of characters allowed.

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

The name attribute is a required attribute. It contains the name of the variable to store the value entered.

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

Specifies the size of the field

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

Used to specify a title for the input item. Some devices use the title as a tooltip.

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

The type may be either text or password. If password is specified for the type, the characters are replaced with asterisks, *. The data isn't encrypted, and so isn't suitable for sensitive data.

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

A default value to use, which is displayed on the device. If the user doesn't enter any data, the default value is used instead.

<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.

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

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.

Attributes for the select Element
Attribute Description
multiple

Determines whether or not multiple selections are allowed. The following example allows multiple selections to be made. The values are stored in a semicolon separated list.

<select name="quandary" multiple="true">
  <!-- Some options -->
</select>

name

Contains the name of the variable to store the selected option.

<select name="quandary">
  <!-- Some options -->
</select>
title

Used to specify a title for the element.

<select name="quandary" title="Please choose">
  <!-- Some options -->
</select>
value

Used to specify a default value for the selection. The value must correspond to the value of one of the options.

<select name="quandary" value="one">
  <!-- Some options -->
</select>

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.

Attributes for the option Element
Attribute Description
onpick Used to specify a URI to open if this option is chosen.

<option value="one" onpick="#oddOne">
  One
</option>
title Used to specify a title for the option.

<option value="one" title="one">
  One
</option>
value Specifies the value for this option. If this option is selected, the value is assigned to the name attribute of the select element.

<option value="one">
  One
</option>

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>

You might also like...

Comments

About the author

Gez Lemon United Kingdom

I'm available for contract work. Please visit Juicify for details.

Interested in writing for us? Find out more.

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“You can stand on the shoulders of giants OR a big enough pile of dwarfs, works either way.”