Contact Information Input Fields | HTML5 Tutorial pdf

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>
Contact Information Input Fields | 55
<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 to a valid email address or absolute URL. If the user enters a value that is not valid then the user agent warns the user and the form data is not submitted (see Figure3 through Figure 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.
User agents vary in terms of the feedback provided to the user as they complete the form.
Figure3: The email input field error messaging in Firefox 4

Figure4: The email input field error messaging in Chrome 12

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 for a browser support chart.
Customizing the default error message
Look closely at Figure5 and Figure6 and notice that the default error message varies from browser to browser. You can specify your own language by adding a title attribute to each input field.
<input type="url" name="website" title="That doesn't look like a valid web address.">
Like search, it’s visually difficult to determine whether or not a user agent supports email, url, or tel. Mike Taylor’s support test at http://www.miketaylr.com/code/input -type-attr.html is useful here, too. Browsers  that do not support these new input type display a text input field.
Figure5: The url input field error messaging in Firefox 4

Figure6: The url input field error messaging in the second Internet Explorer Platform Preview

Table: Email, url, and telephone input types support.

On some touch-screen devices, the user agent will display a custom on-screen keyboard for these fields. For example, if the email input field is selected, the keyboard shows not only letters but also the ampersand ,@, and a period as seen in Figure7. Cool, huh?

Figure7:  Ampersand and TLD are easily in reach on iPad keyboard