HTML5 input types

HTML5 adds a number of extra input types, which amongst other things, enable us to limit the data that users input without the need for extraneous JavaScript code. The most comforting thing about these new input types is that by default, where browsers don't support the feature, they degrade to a standard text input box. Furthermore, there are great polyfills available to bring older browsers up to speed, which we will look at shortly. In the meantime, let's look at these new HTML5 input types and the benefits they provide.

email

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="[e-mail]" required>
</div>

When used in conjunction with...