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

html, input, user-experience, user-interface, validation

Solution

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

- Every browsers handle email validation differently. Opera accept `*@*` as a valid email address. In Safari, Chrome and Firefox you need to enter at least `*@*.*`

- 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"

- 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

- 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 :

- http://davidwalsh.name/html5-email

- http://www.the-art-of-web.com/html/html5-form-validation/#.UesKldKl5KU

- http://diveintohtml5.info/forms.html

Hopefully this help.

Problem

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?

Original source