HTML and CSS Reference
In-Depth Information
Computer Time
I know what you're thinking. Why
max
? Surely that would be
min
, as in
minimum
age?
When computers encounter dates they convert them into an integer number known as a
Unix timestamp
. This is
generated by calculating the number of seconds between the date and January 1, 1970 (the
Unix epoch
). There-
fore, dates in the future will have a larger timestamp because the gap between the date and the Unix epoch is lar-
ger.
If you want to set a minimum age you use the
max
attribute because the Unix timestamp will get larger the younger
the person is. This is because their date of birth is further from the Unix epoch.
Matching Patterns
HTML5 introduces another new attribute for
<input>
elements, the
pattern
attribute. This attribute can
be used to check whether the data the user has input conforms to a certain format or pattern. The pattern attribute can
only be used on
<input>
elements with the types
text
,
search
,
tel
,
url
, or
email
.
The
pattern
attribute should contain a
regular expression
(sometimes written
RegExp
). This is sort of like a code
that defines which characters and symbols can be used, in what quantities, and in what order. The user's input is then
compared to this
code
to see whether it matches or not. You will learn the basics of regular expressions very soon,
but here's a quick example of an
<input>
element that uses the
pattern
attribute.
<input name="initials" type="text"
pattern="[A-Z]+"
title="Your initials should be
supplied in uppercase with no spaces.">
This example restricts the input to uppercase characters between A and Z only. For example, MW would be valid,
but Mw would not. That's because Mw includes a lowercase character. This pattern also does not allow spaces, num-
bers, or special characters.
When using the
pattern
attribute, you should specify a
title
attribute that describes the rules that the user
should stick to. The browser
may
present this to the user if the match fails. Figure 7-3 shows the validation tip that
would be displayed if a user enters an incorrect phone number in your bookings form. Notice how the value of the
title
attribute is displayed in the tip.
