3.3 New Elements 47When using regular expressions with the pattern attribute you need to remem-
ber that the search pattern always has to apply to the field’s entire content. The
specification also suggests using the title attribute to give the user a hint re-
garding the input format. Opera and Google Chrome display this kind of infor-
mation as a tool tip as soon as the mouse pointer hovers over the field. After all
this theory, here is a brief example:
placeholder=""johnsmith" name=pattern id=pattern
title="Only lower case, please; min. 3, max. 32!">
The guideline for the pattern attribute specifies that the character string can only
contain characters between a and z (in lowercase,[a-z]) and that there are at
least 3 and at most 32 characters. Special characters or umlauts are not allowed,
which can be useful for a user name as in the preceding example. If you want to
include certain special characters, for example, the umlauts in the German lan-
guage, you need to include them in the group: [a-zäöüß]. In section 3.4, Client-
side Form Validation, you can find out what happens if the validation fails.
3.3 New Elements
In addition to the new input types and the new attributes mentioned earlier,
the specification also includes new elements for forms. We will discuss these in
the next section. The elements meter and progress create graphical objects that
previously could only be achieved with more or less complicated tricks. Sugges-
tions for text input are offered by datalist, and output provides a placeholder
for the results of calculations. The keygen element has been circulating through
the World Wide Web for a long time but has only reached standardization with
HTML5.
3.3.1 Displaying Measurements with “meter”
The meter element is used to graphically represent a scalar measurement within
a known range. Think, for example, of the fuel gauge in your car: The needle
shows the current level of fuel in your tank as somewhere between 0 and 100
percent. Previously, such graphic representations were usually coded in HTML
with nested div elements, a rather inelegant solution for which the div element
was probably not intended. A status display can also be displayed graphically, as
a picture, through free web services, such as the Google Chart API. You can see all
of these options in the example that follows.