Input
Now let's examine WAP data entry. WML provides options for text entry and for selecting items from lists. WML text input is limited to regular text and password entry via the <input> tag. The <select> tag for lists supports either single or multiple <option> items to be chosen.
Text Entry
Text entry is provided by the <input> tag, which associates data with a name. The following example illustrates simple text input of a user ID. Note that the name attribute specifies the name of a variable to store the user's input. Variables may be preset to a specified value that appears in an input field when first displayed.
<input name="userid"/>
WML provides options for constraining user input. The maxlength attribute limits the number of characters that may be entered in a field. The format attribute provides a simple way to implement a format mask, limiting user entry to a specific set of characters and/or numbers. This provides field-level validation without running CPU-intensive client-side scripts. Note that the emptyok boolean attribute can be used where an optional input field has set a format mask. The formatting rules are specified in Table 1.
Table 1
Formatting Rules
|
N |
Numeric Character |
|
A, a |
Alphabetic character (A=uppercase, a=lowercase) |
|
X, x |
Numeric or alphabetic character (X=uppercase, x=lowercase) |
|
M, m |
Any character (M means that uppercase is assumed and m that lowercase is assumed; in either case, however, any characters may be entered.) |
|
\ |
Leading backslash specifies character literals that will be displayed and included when the field is submitted for server processing. In other words, a 7-digit phone number with a - separator can be specified as: format="NNN\-NNNN" |
|
* |
Leading asterisk (*) specifies 0 or more characters. The * must be followed by a formatting character, such as M or x. In other words, a password with a minimum of four characters can be specified as: format="mmmm*m" |
|
0, 1, 2,...,N |
Leading number specifies 0..N characters. The leading number must be followed by a formatting character. In other words, a 7-digit phone number could be specified as: format="3N\-4N" |
Other input attributes include value, which is used to specify a default value for input, and type, which may be either text (the default) or password when the input should be hidden. (Note that although the password is hidden during entry, it may be transmitted to a server as plain text, depending on the security provided by the wireless device, gateway, and server.) The size attribute specifies the width of the entry area (in characters). Input uses the tabindex attribute to specify display order within the selectable elements on the current card. As with anchors, inputs may specify an accesskey attribute to provide a keyboard shortcut to the field.
Select Lists
Select lists enable a user to choose one or more items from a list. Each item in the list is specified by an option element. A simple select list follows:
<select name="fuel" value="gas" multiple="true">
<option value="gas">Natural Gas</option>
<option value="electric">Electric</option>
<option value="propane">Propane</option>
<option value="wood">Wood</option>
</select>
This list provides four options, setting the default value to the first option (gas) via the value attribute of <select>. The multiple attribute is set to true so that users can choose more than one item; if the multiple attribute is not specified, the default is false. Each option has a value that will be added to the variable fuel. Because this is a multiple select list, when more than one option is chosen, the value of this option is added to a semicolon-separated list string in the fuel variable—for example, gas;propane.
Other attributes that are part of the select element include iname, which specifies a variable name for the index, and ivalue, which provides a default index or indices for this variable. As with inputs and anchors, the title attribute provides a brief label that can be used for a tool tip or similar description. Like <input>, <select> uses the tabindex attribute to specify its order within the selectable elements of the current card.
The option element is used to specify the items in a select list. A select element contains one or more options, with each option typically defining a value used to set the select value attribute. Options may also specify a title attribute and an onpick attribute. The onpick attribute defines the URL to be accessed (i.e., a task).
The following example combines the <input> and <select> elements. Figure 9 displays a WML card for a hypothetical kitchen inspection form. Each input and select element is displayed separately. Note the use of a format mask to ensure that at least one digit is entered for the light level field. The fans input is optional, as indicated by the emptyok attribute. Cooking fuels are selected via a multiple-choice list. In our example, the user has selected cooking fuels of both natural gas and wood.
){kind=link}
<!--Kitchen Inspection-->
<card id="Kitchen">
<do type="accept" label="Submit">
<go href="http::/gov.ns.ca/health/kitchen.cgi"/>
</do>
<p>
<strong>Kitchen</strong><br/>
Light (lux): <input name="light" format="N*N"/>
Number of Fans: <input name="fans" emptyok="true" format="*N"/>
Cooking Fuel
<select name="fuel" value="gas" multiple="true">
<option value="gas">Natural Gas</option>
<option value="electric">Electric</option>
<option value="propane">Propane</option>
<option value="wood">Wood</option>
</select>
</p>
</card>
Submit and Input Elements
This concludes our tour of WML fundamentals. In the next article, we'll examine more of the features of WML.