WML - Inputs


Advertisements

WML provides various options to let a user enter information through WAP application.

First of all, we are going to look at the different options for allowing the user to make straight choices between items. These are usually in the form of menus and submenus, allowing users to drill down to the exact data that they want.

WML <select> Element:

The <select>...</select> WML elements are used to define a selection list and the <option>...</option> tags are used to define an item in a selection list. Items are presented as radiobuttons in some WAP browsers. The <option>...</option> tag pair should be enclosed within the <select>...</select> tags.

This element support the following attributes:

AttributeValueDescription
inametextNames the variable that is set with the index result of the selection
ivaluetextSets the pre-selected option element
multiple
  • true
  • false
Sets whether multiple items can be selected. Default is "false"
nametextNames the variable that is set with the result of the selection
tabindexnumberSets the tabbing position for the select element
titletextSets a title for the list
valuetextSets the default value of the variable in the "name" attribute
xml:langlanguage_codeSets the language used in the element
classclass dataSets a class name for the element.
idelement IDA unique ID for the element.

Following is the example showing usage of these two elements.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">

<wml>

<card title="Selectable List">
<p> Select a Tutorial :
 <select>
  <option value="htm">HTML Tutorial</option>
  <option value="xml">XML Tutorial</option>
  <option value="wap">WAP Tutorial</option>
 </select>
</p>
</card>

</wml>

When you will load this program, it will show you the following screen:

WAP Example 21

Once you highlight and enter on the options, it will display the following screen:

WAP Example 22

You want to provide option to select multiple options, then set multiple attribute to true as follows:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">

<wml>

<card title="Selectable List">
<p> Select a Tutorial :
 <select multiple="true">
  <option value="htm">HTML Tutorial</option>
  <option value="xml">XML Tutorial</option>
  <option value="wap">WAP Tutorial</option>
 </select>
</p>
</card>

</wml>

This will give you a screen to select multiple options as follows:

WAP Example 24

WML <input> Element:

The <input/> element is used to create input fields and input fields are used to obtain alphanumeric data from users.

This element support the following attributes:

AttributeValueDescription
nametextThe name of the variable that is set with the result of the user's input
maxlengthnumberSets the maximum number of characters the user can enter in the field
emptyok
  • true
  • false
Sets whether the user can leave the input field blank or not. Default is "false"
formatA
a
N
X
x
M
m
*f
nf
Sets the data format for the input field. Default is "*M".

A = uppercase alphabetic or punctuation characters
a = lowercase alphabetic or punctuation characters
N = numeric characters
X = uppercase characters
x = lowercase characters
M = all characters
m = all characters
*f = Any number of characters. Replace the f with one of the letters above to specify what characters the user can enter
nf = Replace the n with a number from 1 to 9 to specify the number of characters the user can enter. Replace the f with one of the letters above to specify what characters the user can enter

sizenumberSets the width of the input field
tabindexnumberSets the tabbing position for the select element
titletextSets a title for the list
type
  • text
  • password
Indicates the type of the input field. The default value is "text". Password field is used to take password for authentication purpose.
valuetextSets the default value of the variable in the "name" attribute
xml:langlanguage_codeSets the language used in the element
classclass dataSets a class name for the element.
idelement IDA unique ID for the element.

Following is the example showing usage of this element.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">

<wml>

<card title="Input Fields">
<p> Enter Following Information:<br/> 
 Name: <input name="name" size="12"/>
 Age :  <input name="age" size="12" format="*N"/>
 Sex :  <input name="sex" size="12"/> 
</p>
</card>

</wml>

This will provide you the following screen to enter required information:

WAP Example 23

WML <fieldset> Element:

The <fieldset/> element is used to group various input fields or selectable lists.

This element support the following attributes:

AttributeValueDescription
titletextSets a title for the list
xml:langlanguage_codeSets the language used in the element
classclass dataSets a class name for the element.
idelement IDA unique ID for the element.

Following is the example showing usage of this element.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">

<wml>

<card title="Grouped Fields">
<p> 
<fieldset title="Personal Info">
 Name: <input name="name" size="12"/>
 Age :  <input name="age" size="12" format="*N"/>
 Sex :  <input name="sex" size="12"/> 
</fieldset>
</p>
</card>

</wml>

This will provide you the following screen to enter required information. This result may differ browser to browser.

WAP Example 25

WML <optgroup> Element

The <optgroup/> element is used to group various options together inside a selectable list.

This element support the following attributes:

AttributeValueDescription
titletextSets a title for the list
xml:langlanguage_codeSets the language used in the element
classclass dataSets a class name for the element.
idelement IDA unique ID for the element.

Following is the example showing usage of this element.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">

<wml>

<card title="Selectable List"> 
<p>
 <select>
   <optgroup title="India">
    <option value="delhi">Delhi</option>
    <option value="mumbai">Mumbai</option>
    <option value="hyderabad">Hyderabad</option>
   </optgroup>
   <optgroup title="USA">
    <option value="ohio">Ohio</option>
    <option value="maryland">Maryland</option>
    <option value="washington">Washingtone</option>
   </optgroup>
 </select>
</p>
</card>

</wml>

When a user loads above code, then it will give two options to be selected:

WAP Example 26

When a user selects any of the options, then only it will give final options to be selected. So if user selects India, then it will show you following options to be selected:

WAP Example 27
Advertisements