WEB Advent 2012 / Better Forms for Mobile Users

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.


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:

<input type="text" pattern="\d+ \w+">

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.

Invalid and valid fields

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:


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 <input type="text" />:

Normal text inputs

Here’s how it looks with <input type="email" />:

Email inputs

The difference is subtle, but both keyboards have made the @ symbol easier to get to. Now here’s <input type="url" />:

URL inputs

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

<input type="number" /> 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:

Number inputs

A nice, big, numeric keypad.

Some browsers support even more. Here are <input type="range" /> (obviously this one needs some additional visual feedback) and <input type="datetime-local" />:

Datetime and range inputs

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 fine — so 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.

HTML5 forms in the wild

Other posts