HTML and CSS Reference
In-Depth Information
Special Text: URLs, E-mail Addresses, and Phone Numbers
Similar to the new input type for search controls, HTML5 introduces specialized input types for URLs
(
input type="url"
), e-mail addresses (
input type="email"
), and phone numbers (
input
type="tel"
). They typically look just like ordinary text fields, but browsers can give these special fields a
bit of special treatment. Older browsers that don't recognize these new input types still fall back to a
standard text field.
A URL or e-mail address should follow a certain format: complete URLs should begin with a protocol such
as
http:
,
https:
,
ftp:
,
mailto:
, and so on, and e-mail addresses should comprise a username
followed by an
@
symbol followed by a domain name (or possibly an IP number). Browsers that recognize
and support
input type="url"
and
input type="email"
can automatically check that the entered
value conforms to the expected format and display a warning if it doesn't, preventing the user from
submitting the form until she corrects the field. It's up to the browser how it displays the errors, and
different browsers indicate errors in very different styles.
Listing 8-5 shows part of a comment form like you might find on a typical weblog, with fields for an e-mail
address and website URL. The e-mail field also carries a
required
attribute so browsers that recognize
this attribute won't allow the form to be submitted until all required controls carry a value. The URL field
isn't required here, but if a commenter does enter a value, the browser will require that value to be a
complete URL before submitting the form.
Listing 8-5.
A partial comment form featuring inputs for an e-mail address and a URL
<ul>
<li>
<label for="name">Your name (required)</label>
<input type="text" id="name" name="name" required>
</li>
<li>
<label for="email">Your e-mail address (required, not published)</label>
<input type="email" id="email" name="email" required>
</li>
<li>
<label for="url">Your website</label>
<input type="url" id="url" name="url">
</li>
</ul>
This form can't be submitted until the name and e-mail fields are filled, and the e-mail field must hold a
formatted e-mail address. However, a browser can't verify that the provided e-mail address actually exists
or that it belongs to the person entering it; the browser can only check that the data conforms to the
general format of an e-mail address (
x@y
). The URL field validation is even more rudimentary, only
requiring some kind of protocol prefix followed by a colon (
:
) and after that the field will accept any other
text; the browser won't verify that the rest of the URL is complete or if it's a working Internet address (and it
may not even be a real protocol—any character followed by a colon will usually pass the URL test).
