HTML5 input types

HTML5 has a number of extra input types. These have been a great addition because when they are supported, they offer great additional functionality and, when not supported, they still behave like a standard text type input. Let’s take a look at them.

The email input type

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

type="email"

Supporting browsers will expect a user input that matches the syntax of an email address. In the following code example, type="email" is used alongside required and placeholder:

<div>
  <label for="email">Your Email address</label>
  <input
    type="email"
    id="email"
    name="email"
    placeholder="dwight.schultz@gmail.com"
    required
  />
</div>

When used in conjunction with required, trying to input a non-conforming value will generate a warning message:

Figure 13.6: An error shows...