Make mobile-friendly forms with HTML5 input types
IT Services enhanced the Stanford Web Forms service using some of the new features in HTML5, which was inspired by Mark Pilgrim’s website on HTML5 (Dive Into HTML5) and in particular, the section on forms, “A Form of Madness."
"Dive Into HTML5" covers the new HTML5 features applicable to HTML forms, and how several browsers — including the iPhone’s — already take advantage of them. Even though support isn’t widespread yet, it’s safe to start using some of these right now because older browsers fall back on regular inputs if they don’t understand the new ones.
Purpose of site
Stanford community members can use the Stanford Web Forms service to make contact forms, short surveys and polls, instructor evaluations, and other forms free of charge. They don't need to know HTML or JavaScript to create these forms.
Mobile needs
Many mobile devices don't have a physical keyboard and they provide users with a virtual one instead. Users need an easy-to-use keyboard when they're entering text from a mobile device. So we took advantage of some iPhone features to make the keyboard easier to use for different types of form fields.
For example, the default keyboard contains characters and a space bar. Numbers, special characters, and punctuation get relegated to a second and third screen accessible through special keys.
Screenshot of regular keyboard on the iPhone when filling out an input field of type "text."
This type of layout works for generic text input, but it’s not ideal for entering URLs and email addresses, which contain periods, @ signs, and slashes that users don't see on the first screen.
The iPhone’s keyboard, however, can adapt to different types of inputs, as long as the browser is given a hint about the desired type of input. These browser hints are in the <input> HTML tags.
For example, one version of the iPhone keyboard replaces part of the space bar with an @ sign and a period, making it easier for users to enter email addresses.
Screenshot of iPhone showing keyboard optimized for entering email addresses
Another version of the iPhone keyboard makes it easy to enter URLs by replacing the space bar with a period, a slash, and a shortcut for .com. Holding down the .com key makes other options appear for other domains such as .edu and .org.
Screenshot of iPhone showing keyboard optimized for entering URLs
Tips and tricks
The Web Forms Service creates the new HTML5 input types for you, and the iPhone’s keyboard reacts to them automatically. If you want to make use of HTML5 input types in your hand-coded forms, here's how.
A regular text input looks like this:
<input type="text" />
Replace "text" with "url" or "email":
<input type="url" /> or <input type="email" />
If an older browser comes across your form and doesn't understand the new input types, it'll behave as if the input was a regular text input:
One thing to pay attention to is your CSS styles. If you’ve targeted text inputs specifically in your rules, you'll need to update the styles to include email and URL inputs as well. This is what the service uses:
input[type="text"],
input[type="email"],
input[type="url"] { margin: 0px; padding: 0px; width: 25em; }
Feedback
We haven’t heard feedback from users directly, but we hope this is one of those small details that improves our users' experience when they fill out forms.
