HTML5 Tip: Email Input Type

Posted Monday November 26, 2012 at 9:33:42 pm in Development

Ever notice how sometimes when you're using your touch device and you click on a particular field and the onscreen keyboard changes a bit? Maybe the keyboard shows an @ without having to press to go to a different set of characters. Or maybe the keyboard shows a ".com" button.

Did you ever wonder how that works? Or think to yourself, "Well, gee, that's mighty convenient!"

It's really the magic of a "new" batch of input types in the HTML5 spec. In this piece I'm specifically talking about the email input type:

W3 linky link (for those that feel like sleeping while reading):

http://www.w3.org/TR/html-markup/input.email.html

Long story short, it's an input type that operates very much in the same way as a text input type, but it's more descriptive.

 

Usage:

< input type="email" id="email" />

 

The beauty of the email input type is that it degrades gracefully. IF the browser implements that particular input type via the HTML5 spec, it will ensure the user has entered a valid email address in the field. Furthermore, the onscreen keyboard (if a touch device is being used) will show more specific characters for email addresses (@, .com, etc.)

Anyways, that's it. Until next time, happy coding!

The opinions expressed herein are my own personal opinions and do not represent my employer’s view