Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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?

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

Incredible Demos

  • By
    MooTools Overlay Plugin

    Overlays have become a big part of modern websites; we can probably attribute that to the numerous lightboxes that use them. I've found a ton of overlay code snippets out there but none of them satisfy my taste in code. Many of them are...

  • By
    Create an Animated Sliding Button Using MooTools

    Buttons (or links) are usually the elements on our sites that we want to draw a lot of attention to. Unfortunately many times they end up looking the most boring. You don't have to let that happen though! I recently found a...

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. Duncan

    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. Fabian Beiner

    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. Jim Morrison

    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. MyFreeWeb

    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. david

    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. Maidul

    This email types rocks

  11. Rena

    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. Shawn Deprey

    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. Jon535

    Thank you, David, I took the form!

  17. Carl

    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!