HTML and CSS Reference
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-
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.
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.