Formatting input fields in xHTML-MP

Something VERY important when you want to build a wireless site is to make users’ life easier when they need to input data. The first step is of use the smallest number of input fields that you can (selects or lists of links are always more comfortable), but when you can’t avoid it you should at least help the user. One way is of defining the format of the input field (numbers, letters, etc).

In the WML days you would add an attribute named “format” to the input field and specify the format you wanted to apply, for example “*N” for numbers only, “4N” if you require 4 numbers, “*X” for any uppercase character and so on. Check this out if you can’t remember.

With xHTML we don’t have the “format” attribute anymore so many browser developers agreed to use a specific style attribute: -wap-input-format
The syntax remains the same. Copying and pasting from an old page I was sure that worked, I used:
<input style=”-wap-input-format=*N”>

It worked for some devices and did not work for others. Posting on the great wmlprogramming list I got the solution: *N should be surrounded with apostrophes. The new syntax works like a charm:
<input style=”-wap-input-format=’*N'”>

&apos; may be used in place of ‘. With the devices I tested it worked nicely.

In case the style attribute did not work, you may try to use the old “format” attribute which is not compliant to the xHTML standard but some device support it nicely (for example the Samsung Z107). One extra of the format attribute is that you may also specify more complex strings such as “NNN-NNN-NNNN” if you want the user to input numbers the way they are generally referred in USA, for example.
Sample code:
<input format=”NNN-NNN-NNNN”>

I would also like to suggest this nice site that was suggested on the list. It has many useful information about WML and xHTML-MP and CSS.

UPDATE: Please, read the comments a kind visitor posted a little correction to my xHTML-MP styles.

One thought on “Formatting input fields in xHTML-MP

  1. How do you specify 10 required numeric characters? 9N works, 10N does not work at all.I am currently using NNNNNNNNNN, but this is not the desired result.Suggestions?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s