You can set an input to the email type like this:

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="dwight.schultz@gmail.com" required>
</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 been added to the software keyboard for easy email address completion:

You can set an input field to a type of number like this:

type="number"

A supporting browser expects a number to be entered here. Supporting browsers also provide what's called spinner controls. These are tiny pieces of user interface that allow users to easily click up or down to alter the value input. 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>
</div>

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

Implementation of what happens if you don't enter a number varies. For example, Chrome and Firefox do nothing until the form is submitted, at which point they pop up a warning above the field. Safari on the other hand, simply does nothing, and merely lets the form be submitted. Internet Explorer 11 simply empties the field as soon as focus leaves it.

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

<input type="number" step="10">

You can set an input field to expect a URL like this:

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:

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 .com key? Because we've used a URL input type they are presented by the device for easy URL completion (on iOS, if you're not going to a .com site you can press and hold for a few other popular top level domains).

Set an input field to expect a telephone number like this:

type="tel"

Here's a more complete 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>
</div>

Although, a number format is expected on many browsers, even modern evergreen ones such as Internet Explorer 11, Chrome, and Firefox, it merely behaves like a text input field. When an incorrect value is input, they fail to provide a suitable warning message when the field loses focus or on form submission.

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

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.

a[href^=tel] { color: inherit; }

You can set an input as a search type like this:

type="search"

The search input type works like a standard text input. Here's an example:

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

However, software keyboards (such as those found on mobile devices) often provided a more tailored keyboard. Here's the iOS 8.2 keyboard that appears when a search input type gets focus:

You can set an input to expect a certain pattern input like this:

pattern=""

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

Again, browsers do things differently. Internet Explorer 11 requests that the field is entered correctly, Safari, Firefox, and Chrome do nothing (they just behave like a standard text input).

Want to set an input field to receive a hexadecimal color value? You can do this:

type="color"

The color input type invokes a color picker in supporting browsers (currently just Chrome and Firefox), 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>

The thinking behind the new date and time input types is to provide a consistent user experience for choosing dates and times. If you've ever bought tickets to an event online, chances are that you have used a date picker of one sort or another. This functionality is almost always provided via JavaScript (typically jQuery UI library) but the hope is to make this common necessity possible merely with HTML5 markup.

date

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, defaulting on most browsers to a standard text input box. Chrome and Opera are the only two of the modern browsers to have implemented this functionality. That's not surprising as they both use the same engine (known as Blink in case you were interested).

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

month

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:

week

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:

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

The range input type creates a slider interface element. Here's an example:

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

And the following screenshot shows how it looks in Firefox:

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:

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

All this does is get the current value of the range slider and display it in the element with an ID of range (our span tag). You can then use whatever CSS you deem appropriate to change the appearance of the value.

There are a few other form related features that are new in HTML5. You can read the full specification at http://www.w3.org/TR/html5/forms.html.