type="email" – supporting browsers will expect a user input that matches the syntax of an e-mail address. In the following code example type="email" is used alongside 'required' and 'placeholder':

<div>
  <label for="email">Your Email address</label>
  <input id="email" name="email" type="email" placeholder="[email protected]" required aria-required="true">
</div>

When used in conjunction with required submitting a non-conforming input will generate a warning message:

Furthermore, many touch screen devices (for example Android, iPhone and so on) change the input display based upon this input type. The following screenshot shows how an input type="email" screen looks on the iPad. Notice the '@' symbol for easy email address completion:

type="number" – supporting browsers expect a number to be entered in a number type input field. They also supply spinner controls by default, allowing users to easily click up or down to alter the value. The following is a code example:

<div>
  <label for="yearOfCrime">Year Of Crime</label>
  <input id="yearOfCrime" name="yearOfCrime" type="number" min="1929" max="2015" required aria-required="true" >
</div>

And the following screenshot shows how it looks in a supporting browser (Chrome v16):

Implementation of what happens if you don't enter a number varies. For example, Chrome (v16) clears the field as soon as it loses focus without providing any feedback whilst Firefox (v9) allows anything to be entered (defaulting to the standard text input type). You'll notice in the previous code example, we have also set a minimum and maximum allowed range similar to the following code:

type="number" min="1929" max="2015"

Numbers outside of this range (should) get special treatment. Browser implementation is varied. For example, Chrome (v16) displays a warning whilst Firefox (v9) does nothing.

type="url" – as you might expect, the URL input type is for URL values. Similar to the tel and email input types, it behaves almost identically to a standard text input. However, some browsers add specific information to the warning message provided when submitted with incorrect values. The following is a code example including the placeholder attribute:

<div>
  <label for="web">Your Web address</label>
  <input id="web" name="web" type="url" placeholder="www.mysite.com">
</div>

The following screenshot shows what happens when an incorrectly entered URL field is submitted in Chrome (v16):

Like type="email", touch screen devices often amend the input display based upon this input type. The following screenshot shows how an input type="url" screen looks on the iPad:

Notice the Go, forward slash (/), and .com keys? Because we've used a URL input type they are presented by the device for easy URL completion (unless you're not going to a .com site in which case, you know, thanks for nothing Apple).

type="tel" is another contact information specific input type. tel is used to signify to the browser that the form expects a telephone number entered within that field. The following code is an example:

<div>
  <label for="tel">Telephone (so we can berate you if you're wrong)</label>
  <input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required aria-required="true" >
</div>

Although, a number format is expected, on many browsers, even modern ones such as Chrome v16 and Firefox v9, it merely behaves like a text input field. They are currently failing to provide a suitable warning message on form submission when incorrect values are entered.

However, better news is that like the email and url input types, touch screen devices often thoughtfully accommodate this kind of input with an amended input display for easy completion; here's the tel input when accessed with an iPad (running iOS 5):

Notice the lack of alphabet characters in the keyboard area? This makes it much faster for users to enter a value in the correct format.

type="search" – although the search input type works in the same manner as a standard text input, some browsers render the code with some subtle differences. The following code is an example:

<div>
  <label for="search">Search the site...</label>
  <input id="search" name="search" type="search" placeholder="Wyatt Earp">
</div>

The following screenshot shows how the previous code looks in Firefox (v9); notice the default styling of the input box is rectangular:

However, Chrome (v16) renders that same code differently by default with rounded edges and a quick clear button on the right:

pattern=""—Be afraid, be very afraid (remember what film that's the tagline from?) In my opinion, this tagline could just as easily be applied to regular expressions. If you don't know what regular expressions are, I dare say ignorance is bliss. If you do, and worse still, you understand them, the following section is for you.

The pattern attribute allows you to specify, via a regular expression, the syntax of data that should be allowed in a given input field. The following code is an example:

<div>
  <label for="name">Your Name (first and last)</label>
<input id="name" name="name" pattern="([a-zA-Z]{3,30}s*)+[a-zA-Z]{3,30}" placeholder="Dwight Schultz" required aria-required="true" ></div>

Such is my commitment to this book, I searched the Internet for approximately 458 seconds to find a regular expression that would match a first and last name syntax. By entering the regular expression value within the pattern attribute, it makes supporting browsers expect a matching input syntax. Then, when used in conjunction with the required attribute, incorrect entries get the following treatment in supporting browsers. In this instance I tried submitting the form without providing a last name:

type="color" – the color input type produces a color picker in supporting browsers, allowing users to select a color value in a Hexadecimal value. The following code is an example:

<div>
  <label for="color">Your favorite color</label>
  <input id="color" name="color" type="color">
</div>

Sadly, at present, browser support is scant. Only Opera (v11) seems to provide the color picker. When the required color isn't initially shown, clicking the Other... button at the bottom launches the OS's default color picker:

The following code is an example:

<input id="date" type="date" name="date" />

Similar to the color input type, native browser support is thin on the ground at present, defaulting on most browsers to a standard text input box. Good ol' Opera has already implemented the functionality though and the following screenshot shows how that example code renders in Opera (v11):

There are a variety of different date and type input types available. What follows is a brief overview of the others.

The following code is an example:

<input id="month" type="month" name="month">

The interface allows the user to select a single month and provides the input as a year and month for example 2012-06.

The following screenshot shows how it looks in the browser:

The following code is an example:

<input id="week" type="week" name="week">

When the week input type is used, the picker allows the user to select a single week within a year and provides the input in the 2012-W47 format.

The following screenshot shows how it looks in the browser:

The following code is an example:

<input id="time" type="time" name="time">

The time input type allows a value in the 24 hour format, for example 23:50.

It displays in supporting browsers with spinner controls but only allows relevant time values:

The following code is an example:

<input id="datetime" type="datetime" name="datetime">

It looks similar to the following screenshot in Opera (v11):

And looks even better on iOS devices as shown in the following screenshot:

This input type creates date and time values (separated by a T) and then the time zone (Z for UTC or a + or – for offset values). 25th October 2009 in UTC is shown as follows:

2009-10-25T05:05:00Z

As UTC is, for most practical purposes, equivalent to GMT, it's easy to understand offsets. For example, Pacific Standard Time (Los Angeles) is 8 hours behind GMT (UTC -8 hours). That would be reflected in the input value as shown:

2009-10-25T05:05:00-8:00

The datetime-local version works in exactly the same manner as datetime but omits the time zone information.

The range input type creates a slider interface element. The following code is an example:

<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10" value="5" >

And the following screenshot shows how it looks in Safari (v5.1):

The default range is from 0 to 100. However, by specifying a min and max value in our example we have limited it to between 1 and 10.

One big problem I've encountered with the range input type is that the current value is never displayed to the user. Although the range slider is only intended for vague number selections, I've often wanted to display the value as it changes. Currently, there is no way to do this using HTML5. However, if you absolutely must display the current value of the slider, it can be achieved easily with some simple JavaScript. Amend the previous example to the following code:

<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10"value="5" onchange="showValue(this.value)"><span id="range">5</span>

We've added two things, an onchange attribute and also a span element with the id of range. Now, we'll add the following tiny piece of JavaScript somewhere in the page:

<script>
  function showValue(newValue)
  {
    document.getElementById("range").innerHTML=newValue;
  }
</script>

All this does is gets the current value of the range slider and display it in the element with an id of range (our span tag). With a tiny bit of CSS styling to make the value bigger and red, the following screenshot shows the effect–with the value updating as the slider is moved: