The most direct method of gathering data is the use of the 'input' element. A powerful feature of this element is that you can specify a format mask with the 'format' attribute. The input mask allows you to tell the browser the characters, which are acceptable for entry in the input field. For example the entry field can be formatted to accept a defined number of characters or can be limited to accept only alpha or numeric characters.
The WML specification has left room for interpretation in the presentation layer of differing browsers. In this article we will explore the differing browser implementations of several attributes of the 'input' element. For example the Nokia browser will not support pre-filled data in the input element and any pre-filled information will be lost. Whereas the Openwave bowser will support the use of pre-filled data in input fields, to speed up data entry for the user when part of the user-input is already known. Also for applications running on the Nokia browser you must ensure that the maxlength attribute has been set for the data input field. This is particularly important as data will be lost when the user the does not enter the expected amount of input on the Nokia browser. The following discussion explores general guidelines for formatting user input and then goes on to look at formatting input on Nokia and Openwave browsers.
General guides for formatted input:
The title of the input field should be used to indicate what type of input is required. For example, figures 1 and 2 below show that the field requires the date to be entered in a specific format (mmyyyy).
Fig. 1: Input field requires dates formatted (mm/yyyy)
Where appropriate you should force the entry type to be either alpha or numeric. This will avoid user input error. An example of this is only allowing numeric input for some postal code formats.
Another way to avoid user input error is to restrict the length of input that can be entered. This is especially useful for telephone numbers or credit card numbers where the input field can be restricted to the expected number of characters.
To aid speed of data capture and help illustrate expected input format you may consider pre-filling any data that you know will remain constant. For example, if you ask the user to enter the year, you may pre-fill the first two fields as follows: (20XX).
To ensure that a user enters data in a required input field, delay displaying the soft-key until the required field is completed.
Figure 2 shows how to add a "/" and the figure "20" automatically after the user enters the first two digits. The soft-key label will only appear after the complete date has been entered.
Fig. 2: How to add a "/" and the figure "20" automatically after the user enters the first two digits
Set the default input mode to numeric when the entry typically is numeric or starts with a number, but also allow the user to enter letters or symbols.
For example, phone numbers generally consist of numbers only, but in some cases the user may also need to enter a special character, such as + or ##. For example:
<input name="phnum" type="phonenum">
This shows how to use type="phonenum" so that the input mode is initially numeric and so that users can change to alphanumeric or symbol mode.
Include symbols in the format to simplify text entry.
Use symbols (such as / : ; -) in the formatting string to indicate the expected input. This provides better visual information to the user entering data. For example:
<input name="exp" title="exp date mmyyyy" format="NN\/\2\0NN"/>
When using the format nN or nM, keep in mind that the user can enter from 0 to n digits or characters.
Set the proper case (lowercase or uppercase). The following example shows how to set the appropriate case when the user first accesses the input field. For example:
State (2 Letter Code)
<input name="state" format="MM"/>
Use M*m formatting to obtain sentence-like formatting:
Last Name:
<input name="lname" format="M*m"/>
Do not include symbols in the formats. When you include symbols in the format string, the user must manually input the symbol in the exact order that the format string specifies it. If the user fails to do this, all data input will be rejected, and the user will have to try again.
In phone number entries, use appropriate formatting. If the field requires the user to enter a special character (such as + or ##), do not define a format. Also remember that phone numbers can vary in length (7, 10, 11 digits), so do not format for length.
When using the format nN or nM, keep in mind that the user must enter exactly n number of digits or characters.
Use the maxlength attribute to prevent users from losing entered data. When the user exits a data query formatted with 3N (NNN) or 3M (MMM), the data is lost when the user does not enter exactly 3 numbers or characters. Set the maxlength attribute and state the number of required number of characters in the title to inform the user and avoid lost data.
The emptyok="false" attribute has no effect. This attribute does not prevent the user from leaving an input field empty.
