HTML and CSS Reference
Alice has obtained some regular expressions for phone numbers, postal codes, and
Red Ball Pizza receipt numbers. You'll add these regular expression patterns to the
phone , zip , and receipt fields, and then test them in your browser. Note that some of
the regular expressions are long and complicated, and you must type them exactly as
written. If you make a mistake, you can copy the text of the regular expressions from the
regex.txt file in the tutorial.06/tutorial folder.
The pattern attribute can
be used only with input
boxes that store text. You
cannot use it with other
To apply and test regular expression patterns:
1. Return to the survey.htm file in your text editor.
2. Within the input element for the zip field, insert the following regular expression
pattern that tests for the presence of a five- or nine-digit postal code:
3. Go to the input element for the phone field. Change the data type from
type=”tel” to type=”text” and add the following attribute that tests for a valid
phone number pattern:
4. Scroll down to the input element for the receipt field and insert the following
attribute that tests for a valid receipt number:
Figure 6-70 highlights the revised text in the file.
specifying character patterns with regular expressions
for a five- or
nine-digit postal code
changed to text
for a phone number
for a Red Ball Pizza
5. Save your changes to the file and then refresh survey.htm in your Web browser.
Enter some text in the Name input box.
You can provide a more
descriptive error message
by adding the title attri-
bute to the input element
along with the text of your
6. Type 321 in the input box for the postal code and then submit the form. As shown
in Figure 6-71, the browser rejects the field value because it does not match the
pattern of either a five-digit or a nine-digit postal code.