HTML5: Up and Running

Email Addresses

For over a decade, web forms comprised just a few kinds of fields—the most common are listed in Table 9-3.

Table 9-3. Input types in HTML 4

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” (perhaps by changing your doctype; see The Doctype), 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 ...