Access and secure data - Programming in HTML5 with JavaScript and CSS3 - page 208

The following code shows the pattern attribute used to achieve the desired validation:
<input type="text" title="Only .com and .ca are permitted."
pattern="^[a-zA-Z0-9\-\.]+\.(com|ca)$"/>
Plenty of regular expressions are available to validate a URL; this one is fairly simple. When
specifying the pattern attribute, you should specify the title attribute as well. The title attri-
bute specifies the error message to users in the tooltip when validation fails.
To ensure that users enter the data in the correct format, you should show them a sample
of what the data should look like. This is achieved with the placeholder attribute.
Using the placeholder attribute
The placeholder attribute enables you to prompt users with what's expected in a cer-
tain text box. For example, an email text box might show placeholder text such as
[e-mail]. More importantly, this placeholder text doesn't interfere with users
when they start typing their information into the text box. The placeholder attribute achieves
this, as shown in the following HTML and subsequent output in Figure 3-18.
<input type="email" placeholder="[e-mail]" /></td>
FIGURE 3-18 The placeholder attribute demonstrating to users what is expected
The placeholder text is slightly lighter in color. As soon as a user puts the mouse cursor
into the box to type, the placeholder text disappears and the user's typing takes over.
HTML fields can be validated in many ways. In some cases, it's not so much what is put into
the field, but that the field is indeed filled in. The required attribute controls this for the HTML
elements.
Making controls required
To ensure that a user fills in a field, use the required attribute with the <input> element. Doing
so ensures that users will be told that the field is required. In this example, the email address
will be made a required text box:
<input type="email" placeholder="[e-mail]" required/>
With the required control specified, if users try to submit the form without specifying an
email address, they get an error message (see Figure 3-19). Now users can't submit until they
specify a valid email address.