HTML and CSS Reference
In-Depth Information
Because the browser-level validation for these input types is so simplistic and, more
importantly, because not all browsers yet support these elements and attributes, you
should still have some additional form validation in place, either client-side using
JavaScript or server-side when the form data is processed—ideally both.
Figure 8-6 shows how Chrome indicates an empty required field on the left, in the middle you see how
Opera indicates a malformed e-mail address, and on the right you see how Firefox indicates an incomplete
URL (these are all on Mac OS X). The styles vary widely across the different browsers, but they all
function the same way.
Figure 8-6.
Different browsers indicate errors in very different styles. This shows the same form in Chrome, Opera, and
Firefox.
Another new input type—
input type="tel"
—is akin to the e-mail and URL inputs, though browsers may
not perform any checking of the value's format. A phone number can be written in many different ways,
with many different telephone systems around the world, so a user-agent can't enforce one particular
format for a phone number input. That might lead you to think a standard
input type="text"
would be
best for entering phone numbers (and it had to be sufficient for many years). But a telephone number is a
special kind of data and well deserves its own input type.
With the ever-increasing number and popularity of sophisticated mobile devices, allowing millions of
people to access the Web from their phones, a specialized
input type="tel"
(like the one in Listing 8-6)
can differentiate a phone number field from an ordinary text field.
Listing 8-6.
A telephone input
<p>
<label for="home">Your home phone number</label>
<input type="tel" id="home" name="tel-home">
</p>
