48 Chapter 3—Intelligent Forms
Using the meter element is very simple: You set the desired value via the value
attribute; all other attributes are optional. If you do not set a min and max value,
the browser will use 0 and 1 for these attributes. So, the following meter element
shows a half-full element:<meter value=0.5></meter>Apart from value, min, and max are also the attributes low, high, and optimum—
values that the browser can incorporate into the display. Google Chrome (at the
time of this writing, the only browser apart from Opera that is able to represent
the meter element), for example, displays the normally green bar in yellow if the
optimum value is exceeded.
In the following example you can see a graphic representation, showing the per-
centage of the current year that has already passed. The website presents a vi-
sualization of the output in four different ways: as text with a value in percent,
using the new meter element, via nested div elements, and as graphics produced
by the online service of Google’s Chart API. You can see the result in Figure 3.6.Figure 3.6 The “meter” element and similar options for representing a state