MobileComputing

Introduction

The Wireless Markup Language (WML) is the markup language used to make sites suitable for viewing using a WAP (Wireless Application Protocol) device. If you don't have a WAP device to view the pages, you can get a simulator by downloading the Wireless Companion from YourWAP. The Wireless Markup Language (WML) documents are based on the Extensible Markup Language (XML), and as such need to be well-formed.

• WML is case sensitive. Elements and attributes are all in lowercase.
• All tags must have closing tags.
• Tags must be nested correctly.
• All attribute values must be enclosed in either single or double quotes.

A WML document must correspond to a valid Document Type Definition (DTD). The DTD used throughout this tutorial is wml_1.1.xml. The DTD should be specified at the top of the document following an xml declaration, as in the following example.

<?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">

Getting Started

WML Cards

The content of the page is placed between wml tags within the document. WAP sites consist of cards rather than pages. Each card represents the text that will be displayed on the device's screen. Not surprisingly, a collection of cards is referred to as a deck. A single document may contain one or more cards. Each card should contain an id attribute, and a title attribute. The id attribute is used for linking, and the title attribute will be displayed as the title on the device's screen. The following example defines a basic WML document with a single card.
first.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="index" title="Welcome">
<p>
    This is my first WML document.
</p>
</card>
</wml>

Formatting Text

The following elements are supported in WML to format how the text will be displayed on the device.

Basic Elements to Format Text
Element	Description
<b> some text </b>	The text between these tags will be rendered in bold
<big> some text </big>	The text between these tags will be rendered with a large font
<br/>	This tag will force a new line. As the tag doesn't have a corresponding closing tag, a forward slash is required at the end
<em> some text </em>	The text between these tags will be rendered with emphasised
<i> some text </i>	The text between these tags will be rendered in italic
<p> some text </p>	All text between these tags are treated as a paragraph
<small> some text </small>	The text between these tags will be rendered with a small font
<strong> some text </strong>	The text between these tags will be rendered with a strong emphasis
<u> some text </u>	The text between these tags will be rendered underlined

The following example extends the original document to include some extra formatting.
formatted.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="index" title="Welcome">
<p align="center">
    This is my <br/><em>first</em><br/> WML document.
</p>
</card>
</wml>

Output From Program

Displaying Special Characters in WML

The following characters all have reserved meanings in WML. To show the characters on the device, you must use the code.

Special Characters
Character	Description	Code
<	Less than	&lt;
>	Greater than	&gt;
'	Apostrophe	&apos;
"	Quote	&quot;
$	Dollar sign	$$
	Non-breaking space	&nbsp;

Working with Cards

Each page on the device is called a card, and should contain an id, and a title attribute. A WML document may consist of a single card, or multiple cards.

Attributes for Cards
Attribute	Description
id	The name of the card. This attribute acts as an anchor for navigating to the card. The name of the following card is "start". <card id="start" title="Juicy Studio">   <!-- Content of card --> </card> The card may be linked to from the same deck with: <go href="#start"/> If the card is in a different deck, the card may be linked to with: <go href="deckname.wml#start"/> If the card is the first card in the other deck, the card name may be omitted. <go href="deckname.wml"/>
newcontext	Determines whether or not a new context is initialised. If a new context is set, all variables are reset and the history stack is cleared. The possible values for this attribute are true or false. <card id="start" title="Juicy Studio" newcontext="true">     <!-- Content of card --> </card>
onenterbackward	Allows you to specify a URI to open if the card has been navigated to through a prev task. <card id="start" title="Juicy Studio" onenterbackward="#main">     <!-- Content of card --> </card>
onenterforward	Allows you to specify a URI to open if the card has been navigated to through a go task. <card id="start" title="Juicy Studio" onenterforward="#intro">     <!-- Content of card --> </card>
ontimer	Specifies the URI to open if the timer expires. <card id="start" title="Juicy Studio" ontimer="#nextcard">     <!-- Content of card --> </card> See Working with Timers for more information on this attribute.
title	The title used for the card. Some devices display the title on the screen if there is enough space. <card id="start" title="Juicy Studio">     <!-- Content of card --> </card>

Linking Cards

The id attribute is used to identify the name of the card to link to. There are three ways of specifying a link to another card. An absolute link contains the full path to the page, and is typically used to link to other WAP sites. A relative link contains the name of the WML file, either in the same directory, or with the relative path from the current directory. For WML documents that contain more than one card, you can provide an in-document link, which uses the card id to locate the card. The first set of examples use the a element to produce the link. The anchor element is introduced at the end of this page.

Absolute Link

<a href="http://www.juicystudio.com/index.wml">Visit Juicy Studio</a>

Relative Link

<a href="recent.wml">Recent Posts</a>

In-Document Link

<a href="#announce">Announcements</a>

Relative Link to a Particular Card

<a href="recent.wml#today">Recent Posts</a>

The following example is a WML document that contains three cards with in-document links to navigate between the cards.
links.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="index" title="Index Page">
<p>
    <a href="#first">First Link</a><br/>
    <a href="#second">Second Link</a><br/>
    <a href="#third">Third Link</a>
</p>
</card>
<card id="first" title="First Card">
<p>
    This is the first card.<br/>
    <a href="#index">Back to Index</a>
</p>
</card>
<card id="second" title="Second Card">
<p>
    This is the second card.<br/>
    <a href="#index">Back to Index</a>
</p>
</card>
<card id="third" title="Third Card">
<p>
    This is the third card.<br/>
    <a href="#index">Back to Index</a>
</p>
</card>
</wml>

Output From Program

 

The following shows the original page, following the link to the first card.

The anchor Element

The anchor element extends the a element to perform a go, prev, or refresh refresh task. We'll use the refresh element later when we start to use variables in WMLScript. The go element is used to specify the URI, and the prev element is used to return to the previous page. The prev element is particularly useful, as it if there were several ways to end up at the page, they're always taken back to the page they come from. The following example is the previous example re-written to use anchor element.
anchor.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="index" title="Index Page">
<p>
    <anchor>First Link<go href="#first"/></anchor><br/>
    <anchor>Second Link<go href="#second"/></anchor><br/>
    <anchor>Third Link<go href="#third"/></anchor>
</p>
</card>
<card id="first" title="First Card">
<p>
    This is the first card.<br/>
    <anchor>Back to Index<prev/></anchor>
</p>
</card>
<card id="second" title="Second Card">
<p>
    This is the second card.<br/>
    <anchor>Back to Index<prev/></anchor>
</p>
</card>
<card id="third" title="Third Card">
<p>
    This is the third card.<br/>
    <anchor>Back to Index<prev/></anchor>
</p>
</card>
</wml>
The output of running the above program is exactly the same as the previous program.

The Timer Element

The ontimer attribute of the card element may be used with the timer element to automatically move to a new card after a predefined time. The ontimer attribute is assigned the name of the card to go to when the timer expires.
The timer element has a value attribute that determines how long to wait before the timer expires. The time is specified in 1/10ths of a second, therefore a value of ten will be approximately 1 second. Each card may only have a single timer element.
The following example has three cards. The first card has an ontimer event, set to expire after 3 seconds where it automatically moves to the next card. The next card also has an ontimer event that expires after 3 seconds to move automatically to the final card.
timer.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="1" ontimer="#intro">
<timer value="30"/>
<p align="center">
    You're Always<br/>
    <big>Welcome</big><br/>
    at
</p>
</card>
<card id="intro" title="2" ontimer="#index">
<timer value="30"/>
<p align="center">
    Juicy Studio<br/>
    W@P
</p>
</card>
<card id="index" title="Juicy Studio">
<p align="center">
    The answer's @ Juicy Studio<br/>
    W@P.
</p>
</card>
</wml>

Output From Program

The following shows the cards in the order they appear at 3 second intervals.

Images

WAP devices tend to have very small monochrome screens, approximately 100 x 50 pixels for a WAP phone. They use their own image format, wbmp, which fortunately is available on most graphics packages. The img element is used to draw images. As the img tag doesn't have a closing tag, a forward slash is required at the end of the element.The following table shows the attributes available for the img element.

Attributes for Images
Attribute	Description
align	Determines how the image is aligned with the text. The possible values are: top middle bottom
alt	Textual description of the image. The text is displayed on the device while the image is being downloaded. If images are not supported on the device, the alternative text is displayed in its place.
height	The height of the image. If this attribute is provided, the required space is allocated to the rendered page while the image downloads. The attribute may also be used to resize the height of an image.
hspace	Used to determine the amount of white space around the sides of the image.
src	Used to specify the location of the image source.
vspace	Used to determine the amount of white space around the top and bottom of the image.
width	The width of the image. If this attribute is provided, the required space is allocated to the rendered page while the image downloads. The attribute may also be used to resize the width of an image.

The following example displays a picture of a smiley face.
smiley.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="index" title="Welcome">
<p align="center">
    Juicy Studio<br/>
    <img src="images/smile.wbmp" alt="Smile" width="20" height="20"/><br/>
    W@P
</p>
</card>
</wml>

Output From Program

The following shows the cards in the order they appear at 3 second intervals.

Tables

The table element may be used to display tabular data. The following attributes may be used with the table element.

Attributes for the table Element
Attribute	Description
align	Determines how the table is aligned on the device. The following are the possible options. center left right <table columns="2" align="center">
columns	Specifies how many columns will be displayed. This is a required field, and cannot be zero. <table columns="2">
title	Used to specify a title for the table. <table columns="2" title="Temperatures">

The tr element is used to define a row within the table. The td element is used to define a column within a table. The following example uses a data to display the frequency of radio stations.
stations.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="index" title="Radio Stations">
<p>
    <table columns="2">
    <tr>
        <td>
            Rock FM
        </td>
        <td>
            97.4
        </td>
    </tr>
    <tr>
        <td>
            Jazz FM
        </td>
        <td>
            100.2
        </td>
    </tr>
    <tr>
        <td>
            Wish FM
        </td>
        <td>
            102.45
        </td>
    </tr>
    </table>
</p>
</card>
</wml>

Output From Program

Defining Tasks

The do element is used to specify tasks, and may be applied to a card or a deck. Tasks are performed in response to some event, such as clicking a button. The implementation is user agent dependent. For example, a phone may provide an Options button, and a PDA may use a special key depending on the type of the task provided as an attribute of the do element. The following table shows the possible values for the type attribute.

Values for the type Attribute
Value	Description
accept	Positive acknowledgement, for example a button
delete	Delete option, for example a button
help	Help option, maybe context sensitive
options	Provides a list of options, for example through a button
prev	Provides a means of navigating to the previous card
reset	Provides a means of resetting the device's current state
unknown	No specific type defined, equivalent to type=""

The label attribute is used to provide a name for the task. The following example may be used to define a card to accept an instruction, with the label Announcements.

<do type="accept" label="Announcements">

Binding Tasks

For each do element, they must be a task bound to it. The following table lists the possible tasks that may be bound.

Binding Tasks
Task	Syntax	Description
go	<go href="#somewhere"/>	Used to specify a URI.
noop	<noop/>	No operation, does nothing. Used to override deck level tasks.
prev	<prev/>	Navigates to the previous card.
refresh	<refresh>   <setvar name="x" value="32"/> </refresh>	Used to refresh the card's variables. At least one variable must be specified with the setvar element. The setvar element has two attributes, the name of the variable to set, and the value to set for the variable.

The go Element

The go element is used to specify a URI for a task. The following table lists the attributes that may be used with this element.

Attributes for the go Element
Attribute	Description
href	A required attribute which specifies the URI to open. <go href="#somecard"/>
method	Determines which HTTP submission method will be used. The possible choices are post and get. By default, the get method is used. However, if you specify a postfield, the post method will be used by default. The post method is useful if you're submitting non-ASCII data. <go href="#somecard" method="post">     <postfield name="start" value="$first"/>     <postfield name="end" value="$last"/> </go> The postfield element is used to post fields to the HTTP server in name/value pairs.

The following example links to three other cards. The links have been specified as tasks, which has the advantage that the viewing area isn't taken up with links.
tasks.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="index" title="Welcome">
<do type="accept" label="First Card">
    <go href="#first"/>
</do>
<do type="accept" label="Second Card">
    <go href="#second"/>
</do>
<do type="accept" label="Third Card">
    <go href="#third"/>
</do>
<p align="center">
    Juicy Studio<br/>
    <img src="images/smile.wbmp" alt="Smile" width="20" height="20"/><br/>
    W@P
</p>
</card>
<card id="first" title="First Card">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    This is the first card.<br/>
</p>
</card>
<card id="second" title="Second Card">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    This is the second card.<br/>
</p>
</card>
<card id="third" title="Third Card">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    This is the third card.<br/>
</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.

Using Templates

The template element may be used to define event bindings for the whole deck rather than just a card. If a card defines a task of the same type, the card will take precedence over the template. The noop element may be used to disable something defined at deck level. The following table shows the attributes available for the template element.

Attributes for the Template Element
Attribute	Syntax	Description
onenterbackward	<template onenterbackward="#somecard">     <!-- Some task --> </template>	Specifies the URL to go to if the user navigates to a card through the prev element
onenterforward	<template onenterforward="#somecard">     <!-- Some task --> </template>	Specifies the URL to go to if the user navigates to a card through the go element
ontimer	<template ontimer="#somecard">     <!-- Some task --> </template>	Specifies the URL to go to when a timer expires

The following example defines a template for a help option. The help card redefines the help task to a noop element, as it's not required in that card.
help.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>
<template>
    <do type="help" label="Help">
        <go href="#help"/>
    </do>
</template>
<card id="index" title="Welcome">
<do type="accept" label="First Card">
    <go href="#first"/>
</do>
<do type="accept" label="Second Card">
    <go href="#second"/>
</do>
<do type="accept" label="Third Card">
    <go href="#third"/>
</do>
<p align="center">
    Juicy Studio<br/>
    <img src="images/smile.wbmp" alt="Smile" width="20" height="20"/><br/>
    W@P
</p>
</card>
<card id="first" title="First Card">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    This is the first card.<br/>
</p>
</card>
<card id="second" title="Second Card">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    This is the second card.<br/>
</p>
</card>
<card id="third" title="Third Card">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    This is the third card.<br/>
</p>
</card>
<card id="help" title="Help">
<do type="help">
    <noop/>
</do>
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    Smile, press any button and hope for the best. Good luck!
</p>
</card>
</wml>

Output From Program

The following shows the output from the above script. When Options is selected, the Help now appears in the menu for all of the cards, except the help card. The cards first, second, and third now have an options menu which contains the Help option. Other user agents may use a seperate button.

Defining Tasks

The do element is used to specify tasks, and may be applied to a card or a deck. Tasks are performed in response to some event, such as clicking a button. The implementation is user agent dependent. For example, a phone may provide an Options button, and a PDA may use a special key depending on the type of the task provided as an attribute of the do element. The following table shows the possible values for the type attribute.

Values for the type Attribute
Value	Description
accept	Positive acknowledgement, for example a button
delete	Delete option, for example a button
help	Help option, maybe context sensitive
options	Provides a list of options, for example through a button
prev	Provides a means of navigating to the previous card
reset	Provides a means of resetting the device's current state
unknown	No specific type defined, equivalent to type=""

The label attribute is used to provide a name for the task. The following example may be used to define a card to accept an instruction, with the label Announcements.

<do type="accept" label="Announcements">

Binding Tasks

For each do element, they must be a task bound to it. The following table lists the possible tasks that may be bound.

Binding Tasks
Task	Syntax	Description
go	<go href="#somewhere"/>	Used to specify a URI.
noop	<noop/>	No operation, does nothing. Used to override deck level tasks.
prev	<prev/>	Navigates to the previous card.
refresh	<refresh>   <setvar name="x" value="32"/> </refresh>	Used to refresh the card's variables. At least one variable must be specified with the setvar element. The setvar element has two attributes, the name of the variable to set, and the value to set for the variable.

The go Element

The go element is used to specify a URI for a task. The following table lists the attributes that may be used with this element.

Attributes for the go Element
Attribute	Description
href	A required attribute which specifies the URI to open. <go href="#somecard"/>
method	Determines which HTTP submission method will be used. The possible choices are post and get. By default, the get method is used. However, if you specify a postfield, the post method will be used by default. The post method is useful if you're submitting non-ASCII data. <go href="#somecard" method="post">     <postfield name="start" value="$first"/>     <postfield name="end" value="$last"/> </go> The postfield element is used to post fields to the HTTP server in name/value pairs.

The following example links to three other cards. The links have been specified as tasks, which has the advantage that the viewing area isn't taken up with links.
tasks.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="index" title="Welcome">
<do type="accept" label="First Card">
    <go href="#first"/>
</do>
<do type="accept" label="Second Card">
    <go href="#second"/>
</do>
<do type="accept" label="Third Card">
    <go href="#third"/>
</do>
<p align="center">
    Juicy Studio<br/>
    <img src="images/smile.wbmp" alt="Smile" width="20" height="20"/><br/>
    W@P
</p>
</card>
<card id="first" title="First Card">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    This is the first card.<br/>
</p>
</card>
<card id="second" title="Second Card">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    This is the second card.<br/>
</p>
</card>
<card id="third" title="Third Card">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    This is the third card.<br/>
</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.

Using Templates

The template element may be used to define event bindings for the whole deck rather than just a card. If a card defines a task of the same type, the card will take precedence over the template. The noop element may be used to disable something defined at deck level. The following table shows the attributes available for the template element.

Attributes for the Template Element
Attribute	Syntax	Description
onenterbackward	<template onenterbackward="#somecard">     <!-- Some task --> </template>	Specifies the URL to go to if the user navigates to a card through the prev element
onenterforward	<template onenterforward="#somecard">     <!-- Some task --> </template>	Specifies the URL to go to if the user navigates to a card through the go element
ontimer	<template ontimer="#somecard">     <!-- Some task --> </template>	Specifies the URL to go to when a timer expires

The following example defines a template for a help option. The help card redefines the help task to a noop element, as it's not required in that card.
help.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>
<template>
    <do type="help" label="Help">
        <go href="#help"/>
    </do>
</template>
<card id="index" title="Welcome">
<do type="accept" label="First Card">
    <go href="#first"/>
</do>
<do type="accept" label="Second Card">
    <go href="#second"/>
</do>
<do type="accept" label="Third Card">
    <go href="#third"/>
</do>
<p align="center">
    Juicy Studio<br/>
    <img src="images/smile.wbmp" alt="Smile" width="20" height="20"/><br/>
    W@P
</p>
</card>
<card id="first" title="First Card">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    This is the first card.<br/>
</p>
</card>
<card id="second" title="Second Card">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    This is the second card.<br/>
</p>
</card>
<card id="third" title="Third Card">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    This is the third card.<br/>
</p>
</card>
<card id="help" title="Help">
<do type="help">
    <noop/>
</do>
<do type="prev" label="Back">
    <prev/>
</do>
<p>
    Smile, press any button and hope for the best. Good luck!
</p>
</card>
</wml>

Output From Program

The following shows the output from the above script. When Options is selected, the Help now appears in the menu for all of the cards, except the help card. The cards first, second, and third now have an options menu which contains the Help option. Other user agents may use a seperate button.

In this sequence, the second card is chosen from the Options. The second card has an Options button, as the help is automatically assigned to it on this device.

The onevent Element

The onevent element is used to catch events. The event should be bound to one of tasks, go, noop, prev, or refresh. The onevent element has a type attribute which defines the type of event. The following table shows the types of event that are trappable.

Attributes of the onevent Element
Attribute	Description
onenterbackward	Specifies the URL to go to if the user navigates to a card through the prev element <onevent onenterbackward="#somecard">     <!-- Some task --> </onevent>
onenterforward	Specifies the URL to go to if the user navigates to a card through the go element <onevent onenterforward="#somecard">     <!-- Some task --> </onevent>
onpick	Specifies the URL to go to if the user selects an option through a select element. <onevent onpick="#somecard">     <!-- Some task --> </onevent>
ontimer	Specifies the URL to go to when a timer expires <onevent ontimer="#somecard">     <!-- Some task --> </onevent>

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>

Meta Tags

The head Element

The head element contains information about the deck. The head element may contain an access element and/or several meta elements.

The access Element

The access element is used to limit access to the deck, and must be included within the head section if used. By default, WML decks are public. There may only be one access element in a document. The following table shows the attributes used with the access element.

Attributes for the access Element
Attribute	Description
domain	The domain of other decks that are able to access cards in the deck. The default value is the domain of the current deck.
path	The root directory of other decks that are able to access cards in the deck. The default value is the root of the domain, "/".

The following declaration states that the deck is only accessible from Juicy Studio, and only from the /wmlpages directory.
<?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>
<head>
    <access domain="juicystudio.com" path="/wmlpages"/>
</head>
    <!-- Rest of content here -->
</wml>

The meta Element

The meta element allows you to provide meta data about the deck. Any number of meta elements may be used in the head of the WML document. The following table shows the attributes that may be used with the meta element.

Attributes for the meta Element
Attribute	Description
content	This attribute is required, and specifies the meta data for either a http-equiv attribute or the name attribute.
forua	An optional attribute that determines if the property should reach the user agent. The possible values are false, and true. If the value is set to true, it must be sent to the user agent.
http-equiv	Equivalent of HTTP headers. Each meta element must contain either a http-equiv attribute or a name attribute.
name	Used for meta types that have no HTTP equivalent. Each meta element must contain either a name attribute or a http-equiv attribute.

The following meta tag instructs the user agent to expire this page from the cache after 1 day (86,400 seconds).

<?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>
<head>
    <meta forua="true" http-equiv="Cache-Control" content="max-age=86400"/>
</head>
    <!-- Rest of content here -->
</wml>

Some devices will not refresh the deck if the deck is navigated to with the prev element. The must-revalidate parameter may be used to override this. The following example prevents the page from being cached.
<?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>
<head>
    <meta forua="true" http-equiv="Cache-Control" content="must-revalidate"/>
    <meta forua="true" http-equiv="Cache-Control" content="no-cache"/>
</head>
    <!-- Rest of content here -->
</wml>

Creating Dynamic Content

You can create dynamic WML documents with any server side language such as ASP, PHP, PERL, etc. The only thing you need to do is ensure the content type has been set for WML.
In ASP, you set the content type through the Response object.

Setting the content type with ASP

Response.ContentType = "text/vnd.wap.wml"
In PHP, you set the content type through the header function.

Setting the content type with PHP

<?php
header("Content-type: text/vnd.wap.wml");
?>

A Search Page

The following describes how to create a search page for a WAP device. The first thing we need to consider is how we'll be sending data from the WML document to the server. By default, the input element uses the GET HTTP submission method. This isn't an issue with PHP, but with ASP it will mean the data will need to be retrieved through the Request object's QueryString collection. This isn't a problem, but to illustrate the difference, the following example uses the POST method to send the data. The data will need to be retrieved through the Request object's Form collection with ASP when data is submitted using this method.
search.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="index" title="Search Term">
<do type="accept" label="Search Term">
    <go href="terms.asp" method="post">
        <postfield name="term" value="$term"/>
    </go>
</do>
<p>
    Enter a search term:
    <input type="text" name="term" value=""/>
</p>
</card>
</wml>
The following is an ASP document to perform the search, and return a WML document.
terms.asp

<%@ language="vbscript" %>
<% Option Explicit %>
<% Response.ContentType = "text/vnd.wap.wml" %>
<!-- #include file="adovbs.inc" -->
<%
    Dim objDB, objRS, strConnect, strDBVirtualPath, strDBLocation, strSQL
    Dim strTerm, strDescription, counter
    strDBVirtualPath="db/terms.mdb"
    strDBLocation=Server.Mappath(strDBVirtualPath)
    strConnect="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & strDBLocation
    Set objDB = Server.CreateObject("ADODB.Connection")
    objDB.Open strConnect
    Set objRS = Server.CreateObject("ADODB.RecordSet")
    ' Get the search term. This would be Request.QueryString("term") if
    ' no method had been specified for the input element
    strTerm = Request.Form("term")
    strSQL = "SELECT * FROM Terms WHERE [Term] LIKE '%" & strTerm & "%'"
    objRS.Open strSQL, objDB, adOpenStatic, adLockReadOnly, adCmdText
%>
<?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="term" title="Terms">
<do type="prev" label="Back">
    <prev/>
</do>
<p>
<%
    If objRS.EOF Then
        ' No terms found in the recordset
        Response.Write "Unable to retrieve any records like " & strTerm
    Else
        Response.Write "Terms with <em>" & strTerm & "</em><br/>"
        ' Get each term that matches
        Do While NOT objRS.EOF
            counter = counter + 1
            Response.Write "<em>" & objRS.Fields("Term").Value & "</em><br/>"
            strDescription = Server.HTMLEncode(objRS.Fields("Description").Value)
            Response.Write  strDescription & "<br/>"
            Response.Write "---<br/>"
            objRS.MoveNext
        Loop
        Response.Write "Retrieved " & counter & " term(s) containing " & strTerm
    End If
    ' Tidy up
    objRS.Close
    Set objRS = Nothing
    objDB.Close
    Set objDB = Nothing
%>
</p>
</card>
</wml>