Controlling the Type and Number of Characters to be Entered in Input Fields (format Attribute)

Preferences - Do not show ads

The format attribute of the <input> element is used to control the type and number of characters that can be entered in an input field. The format attribute takes a number of format characters as its value. Each format character has a certain meaning. The value of the format attribute is called the input mask.

The following table shows the format characters available (Note: format characters are case-sensitive) and their corresponding meanings:

Here are two WML examples that illustrate the usage of the format attribute:

<input name="name" format="NN"/>

Meaning: You must enter 2 numeric characters in the input field created by the above WML markup.

<input name="name" format="AAAAA"/>

Meaning: You must enter 5 uppercase letters or symbolic characters in the input field created by the above WML markup.

It is a good practice to set an input mask for an input field, since the input mode (alphanumeric mode, numeric mode, etc) of a mobile phone's keypad will be set automatically according to the input mask. It is a very convenient feature for the users of your mobile Internet application. For example, if the input mask is "NN" (it specifies that the text field can only accept 2 numeric characters), a mobile phone's keypad will be set to the numeric mode automatically. If you press a key of the mobile phone, no alphabets or symbols can be outputted.

A single numeric character can be added before a format character in an input mask. For example:

<input name="name" format="2N"/>

It means a user can enter a maximum of 2 numeric characters in the input field. (Notice that the meaning of "2N" is different from that of "NN".)

Also, you can add the * character before a format character in an input mask. For example:

<input name="name" format="*N"/>

It means there is no limit in the number of numeric characters that can be entered.

Another example is:

<input name="name" format="A*a"/>

It means the user must:

• Enter one uppercase character (or symbolic character), and then

• Enter zero or more lowercase character (or symbolic character)

The input mask "A*a" can be applied to text fields that are used to obtain the name of a user. It ensures that the first character must be in uppercase. For example, a user can only enter "Peter" but not "peter".

The default value of the format attribute is "*M".

The following two rules should be followed when adding a numeric character or the * character before a format character:

1. You can only use such character combination once in the input mask.

2. You can only use such character combination at the end of the input mask.

Here are some examples of invalid input mask:

• format="9N9N" -- Reason: You can only use 9N once in the input mask.

• format="*Naa*N" -- Reason: You can only use *N once in the input mask.

• format="9NNNN" -- Reason: You can only use 9N at the end of the input mask. The correct one should be "NNN9N".

• format="*NA" -- Reason: You can only use *N at the end of the input mask.

If a value of invalid syntax is assigned to the format attribute, WAP browsers will ignore it.

Escaped characters can be included in an input mask. To escape a character, you put a single backslash (i.e. \) in front of that character.

Why do we need escaped characters in the input mask? Look at this example and you will understand. Let's say you want a user to enter a date of the form MM/DD/YYYY and you specify "NN\/NN\/NNNN" as the input mask. If the user uses the Openwave Mobile Browser, the / character will be inserted automatically at the third and the sixth character position of the input field as he/she types the date. If the user uses the Nokia Mobile Browser, the / character will not be inserted automatically but the browser will forbid the user to enter characters other than / at the third and the sixth character positions. The escaped characters in this example ensure that the third and sixth characters must be /.

Previous Page

Page 37 of 50

Next Page