HTML5’s “email” and “url” Input Types

By  on  

I've already covered some subtle HTML5 improvements like placeholder, prefetching, and web storage.  Today I want to introduce a few new INPUT element types:  email and url.  Let's take a very basic look at these new INPUT types and discuss their advantages.

The Syntax

The syntax is as basic as a text input;  instead, you set the type to "email" or "url":

<!-- email -->
<input type="email" pattern="[^ @]*@[^ @]*" value="">

<!-- url -->
<input type="url" value="">

Using the new HTML5 pattern attribute, you can also provide a regular expression to validate the email  and URL addresses against.  I'll save those specifics for another post.

The Advantages to Using type="email" and type="url"

There are a few advantages to using these special INPUT types:

  • You may easily style all email INPUT elements with input[type=email]
  • You may easily style all url INPUT elements with input[type=url]
  • This INPUT type could be considered more semantically correct.
  • Mobile accessibility:  if your user is browsing with an iPhone and they arrive at a special email input, the iPhone will display a keyboard with the @ symbol provided on the primary screen.  If the INPUT is of type "url", the iPhone will display the ".com" button on the primary keyboard screen:

    HTML5 INPUT

Input on this...Input...Type

At first I disliked the idea of using different type attribute values per field but after more thought, the accessibility and usability enhancements provided a great boost.  What do you think?

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

Discussion

  1. seelts

    Talking about “pattern” attribute in HTML, you should also mention :valid/:invalid in CSS (http://www.w3.org/TR/css3-ui/#pseudo-validity). Together they are very powerfull.

  2. In the Syntax-box at the top of your post, shouldn’t the input-type for url be ‘url’ instead of ’email’?
    Thanks for you info! I’m really looking forward to be using HTML5, especially if it works in all major browsers!

  3. etjie

    What if someone access from unsupported HTML5 browser? Will the from works?

    • seelts

      such inputs will act like type=”text” for old browsers.
      you can try it in IE for example…

  4. etjie, it will just fall back to a text input field

  5. Buri

    I was always prefering strict attributes and all that stuff aroud, but so far I’ve got to the point that if you want to satisfy doctype, write your own dtd.

    So yes, I think this is great improvement and step forward. And yes, I’m using Android, which supports this feature as well.

  6. Great little article thanks David.

    If it helps… we’re currently tracking HTML5 Forms uptake amongst the major browsers using the brilliant modernizr.js.

    Opera & WebKit (Chrome/Safari) are on the case.. Firefox 4 is starting to support and IE don’t seem to be interested..

    There’s a full list here: http://fmbip.com/litmus#html5-forms-inputs

    Hope that’s useful. J.

  7. I hate when people don’t use these types. I don’t want extra touches to type “@” on my iPod touch. I want the email keyboard.

  8. hi has anybody notice this issue with email input types. i have a contact form with the type email and if you click into the input and then leave without adding anything i get “This email already has an account, please sign in or use a dierent email address.” alert message. i have tried this in opera ff ie chrome and they all do the same. this might just be me..

  9. Thomas Thomassen

    Why did you add a pattern to the email field? I was testing this in Firefox and it seem to perform validation automatically when you set the type to “email”.
    ?

  10. This email types rocks

  11. You forgot the most important part: by having these standard types to identify the fields, browsers can provide helpful autofill interfaces. When you select a “tel” or “email” field on your mobile browser, it could open your address book for you to pick a phone number or address from.

    (Now, will html6 support submitting comment forms without Javascript? Oh wait, that’s been possible for a long time…)

  12. Lucas

    Thank you!!!

    Worked like a CHARM!!

    Absolutelly fantastic and headache free!!

  13. This is a fantastic article! HTML regex is so weird!

  14. Andrie

    This is not working in IE. Any idea why and how to fix it?

  15. Funda

    Hi David,

    any chance to read out the input type (email, search, tel, etc.) in the IE8/IE9? Im getting undefined/text as input type.

    Cheers,
    Funda

  16. Thank you, David, I took the form!

  17. Useful, however it looks like Android does not support these attributes for textareas :/

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!