Forms - HTML5 - page 58

3.2 Contact Information Input Fields

Problem
You want to present a user with a form to provide contact information, such as an email
address, a URL, and a telephone number.

Solution
Use the input element with HTML5 type values of email , url , and tel :
<form>
<fieldset>
<legend>Contact Information</legend>
<p><label>E-mail address <input type="email" name="email"></label></p>
<p><label>Web site <input type="url" name="website"></label></p>
<p><label>Telephone number <input type="tel" name="phone"></label></p>
</fieldset>
<p><button type="submit">Submit</button></p>
</form>

Discussion
How many times have you created text input fields to collect data like an email address,
and then had to write JavaScript to validate the input? You won't have to do this with
the new email and url input types.
These restrict the value entered to a valid email address or absolute URL. If the user
enters a value that is not valid, the user agent warns the user and the form data is not
submitted (see Figures 3-3 - 3-6 for examples of this across various browsers).
The tel input type does not enforce any particular syntax, due to the variety of
telephone number formats used around the world. The new pattern attribute can be
used to enforce a particular syntax, however. For more information, see Recipe 3.12 .
User agents vary in terms of the feedback provided to the users as they complete the
form. At the time of this writing, some browsers are starting to visually highlight fields
that do not validate on blur when the user exits the input field, but do not display the
error message until the form is submitted. Other browsers provide no feedback until
the form is submitted. See Table 3-2 for a browser support chart.

Table 3-2. Browsers supporting the email, url, and tel input types

IE Firefox Chrome Safari Opera iOS Android

10 Platform Preview 2 4.0+ 10+ 4.0+ 11.0+ ✓✓