How to Improve Email Address Form Fields with HTML5

This excerpt from HTML5: Up and Running shows you how to update your email address form fields with HTML5 and explains the benefits.

---

For over a decade, web forms comprised just a few kinds of fields—the most common are listed below.

Field type	HTML code	Notes
Checkbox	<input type="checkbox">	Can be toggled on or off
Radio button	<input type="radio">	Can be grouped with other inputs
Password field	<input type="password">	Echoes dots instead of characters as the user types
Drop-down list	<select><option>...
File picker	<input type="file">	Pops up an “open file” dialog
Submit button	<input type="submit">
Plain text	<input type="text">	The type attribute can be omitted

All of these input types still work in HTML5. If you’re “upgrading to HTML5” you don’t need to make a single change to your web forms. Hooray for backward compatibility!

However, HTML5 defines several new field types, and for reasons that will become clear in a moment, there is no reason not to start using them.

The first of these new input types is for email addresses. It looks like this:

<form>
  <input type="email">
  <input type="submit" value="Go">
</form>

I was about to write a sentence that started with “In browsers that don’t support type="email"...,” but I stopped myself. Why? Because I’m not sure what it would mean to say that a browser doesn’t support type="email". All browsers “support” type="email". They may not do anything special with it (you’ll see a few examples of special treatment in a moment), but browsers that don’t recognize type="email" will treat it as type="text" and render it as a plain text field.

I cannot emphasize enough how important this is. The Web has millions of forms that ask you to enter an email address, and all of them use <input type="text">. You see a text box, you type your email address in the text box, and that’s that. Then along comes HTML5, which defines type="email". Do browsers freak out? No. Every single browser on Earth treats an unknown type attribute as type="text"—even IE 6. So you can “upgrade” your web forms to use type="email" right now.

What would it mean to say that a browser does support type="email"? Well, it can mean any number of things. The HTML5 specification doesn’t mandate any particular user interface for the new input types. Opera styles the form field with a small email icon. Other HTML5 browsers, like Safari and Chrome, simply render it as a text box—exactly like type="text"—so your users will never know the difference (unless they view the page source).

And then there’s the iPhone.

The iPhone does not have a physical keyboard. All “typing” is done by tapping on an onscreen keyboard that pops up at appropriate times, like when you focus a form field in a web page. Apple did something very clever in the iPhone’s web browser: it recognizes several of the new HTML5 input types, and dynamically changes the onscreen keyboard to optimize for that kind of input.

For example, email addresses are text, right? Sure, but they’re a special kind of text. That is, virtually all email addresses contain the @ sign and at least one period (.), but they’re unlikely to contain any spaces. So when an iPhone user focuses on an <input type="email"> element, she gets an onscreen keyboard that contains a smaller-than-usual space bar, plus dedicated keys for the @ and . characters, as shown in the image below.

Keyboard optimized for entering an email address


To sum up: there’s no downside to converting all your email address form fields to type="email" immediately. Virtually no one will even notice, except iPhone users, who probably won’t notice either. But the ones who do notice will smile quietly and thank you for making their web experience just a little easier.