How does HTML 5's input type email work and is it reliable?

Question

I'm making a form that takes e-mail addresses and am deciding whether to use input type='email' or input type='text' and do the validation using JavaScript. I know determining whether an e-mail addresses is of a valid format or not is a difficult task so does anyone know how good a job HTML 5's email attribute does of it?

Reasons to use email attribute

• Saves me from programing a complex regular expression
• Code readability
• Looks nice when given an invalid e-mail address

Reasons not to use email attribute

• Do not know how accurate it works
• For invalid input the looks is different than the rest of the input fields of the form

EDIT: Anyone know how e-mail attribute works in the sense what regular expression it uses?

Answer 1

Facts about HTML5's <input type="email"> :

1. Every browsers handle email validation differently. Opera accept *@* as a valid email address. In Safari, Chrome and Firefox you need to enter at least *@*.*
2. Not all browsers "support" type="email". You still could use type="email" but browser will threat it as type="text" if they don't recognize type="email"
3. On iPhone, when you arrive at input with type="email", iPhone will display "@" at keyboard's main screen, makes your application to be more user friendly
4. You can provide regular expression when using type="email"

My suggestions is you should start using this new HTML5 attribute along with your own validation to achieve point (3) above.

For more info :

1. http://davidwalsh.name/html5-email
2. http://www.the-art-of-web.com/html/html5-form-validation/#.UesKldKl5KU
3. http://diveintohtml5.info/forms.html

Hopefully this help.