PhpRiot
News Archive
PhpRiot Newsletter
Your Email Address:

More information

Better Forms for Mobile Users

Note: This article was originally published at Planet PHP on 18 April 7200.
Planet PHP

Mobile is a special, fun place to be a web developer. On one hand, pretty much all of the browsers are new and support cool things. On the other, processors, graphics, and network are all slow, and you should care about battery life. Additionally, input on even the best phones is still unpleasant and error-prone.

But, because the browsers are new, we can make things a lot better.

Validation

Since you're doing server-side input validation anyway (right?), client-side validation is just to make the user experience better. But, loading a bunch of JavaScript to do this is going to slow down the site.

Fortunately, you can bake a lot of the validation into the form itself and let the browser do it for you.

There are a ton of new input types in html5, and for common types, there is good support on mobile browsers.

First, let's look at the pattern attribute. The value should be a regular expression that matches allowed values. This works on text, search, tel, url, and email fields. For example:

When a user enters text that doesn't match the pattern, the browser will apply the :invalid pseudoclass to the element, which you can style with CSS however you'd like. Here, I set the background to pink.

There's also a :valid pseudoclass that you can use.

Browsers apply the pseudoclass immediately, so if you want to let the user finish entering the text before calling them out, you can use a selector like this: input:invalid:not(:focus). (This worked for me on iOS but not on FirefoxOS.)

Or, use specificity to reset the change:

input:invalid { /* Set something here. */ } input:focus { /* Undo the something from above. */ }

There's one particularly special value for patterns, which is matching numbers only:

\d* [0-9]*

iOS, in particular, will react to this pattern.

Entering data

Now you can skip the big JS download to validate your forms. Do it in html and CSS and let the browser handle it.

The other part of forms that is hard on mobile is entering data. Keyboards are small, and typing a lot is a pain. Here's where the input types really become valuable.

Mobile browsers will change their keyboard in response to certain input types. Here's how it looks with a regular :

Here's how it looks with :

The difference is subtle, but both keyboards have made the @ symbol easier to get to. Now here's :

Gone are the space bars, now we have ., /, and .com readily available.

is an interesting case. We need to add the digits-only pattern (pattern="\d*" or pattern="[0-9]*") for iOS to recognize it, but then we get:

A nice, big, numeric keypad.

Some browsers support even more. Here are (obviously this one needs some additional visual feedback) and :

Use it today

This all works today, right now, in the browser on my real phone.

If a browser doesn't know what to do with a type value, it defaults to type="text", so it still works finea-aso you may want to load a script in that case to do client-side validation.

If you're already using all the tools available, get your friends and coworkers to do it, too. Peer pressure is a good thing. I have seen some of this in the wild, but it's not everywhere yet.