ptg16476052358 LESSON 12: Designing Forms
Like progress, you can set the value of the measurement with the value attribute. You
can also set the maximum value with the max attribute. But you can set several other val-
ues as well:
min Defines the minimum or lower boundary of the range. Unlike the progress
tag, this can be a number other than zero, including negative numbers.
low Defines the part of the meter that is in the low range. This is not the mini-
mum, but rather a point where the value is considered low.
high Like the low value, this defines the part of the meter that is in the high
range. This is not the maximum, but rather a point where the value is con-
sidered high.
optimum This gives the position on the meter that is considered the best. If this is
higher than the high point, this indicates that the higher the value the bet-
ter. If it is lower than the low point, this indicates that the lower values are
better. And if it’s in between this indicates that neither high nor low values
are good.If you don’t specify a minimum or maximum, the range is
assumed to be between 0 and 1. The value, high, low, and opti-
mum numbers must be within that range as well.NOTEIn Figure 12.27, you can see how browsers change the display of meter depending upon
where the value is in relation to the low, high, and optimum values:Input ▼
<p>
Jetta:
<meter min="0" max="14.2" high="13.5" low="3" optimum="14" value="2.5">2.5
gallons</meter>
is getting low, we should get gas!
</p>
<p>
Tundra:
<meter min="0" max="22" high="20" low="5" optimum="21" value="14">14 gallons
</meter>
is okay, we don't need gas yet.
</p>
<p>
Vespa:
<meter min="0" max="5" high="4.5" low="1" optimum="4.6" value="4.7">4.7
gallons</meter>
is practically full, you just filled up!
</p>