Assembling Forms and Applications - HTML5 with CSS3 - page 282

 high : defines the lower numeric bound of the high end of the measured range; a value between
the high and max attributes is considered a high measurement. This attribute's value must be
less than the maximum value ( max attribute), and it also must be greater than the low value and
minimum value ( low attribute and min attribute, respectively), if they are specified. If unspecified,
or if greater than the maximum value, the high value is equal to the maximum value.
 optimum : indicates the optimal numeric value. It must be within the range as defined by the min
and max attributes. When used with the low and high attributes, it gives an indication where
along the range is considered preferable. For example, if the optimum value falls between the
min attribute and the low attribute, then lower values are considered preferable.
 form : associates the element with a form element that has ownership of the meter element. For
example, a meter might display a range corresponding to an input type="number" . The form
attribute is only necessary if the meter element is being used as a form-associated element; even
then, it may be omitted if the element appears as a descendant of a form element.
progress
Somewhat similar to the meter element (and also new in HTML5), the progress element represents the
current stage in the completion of a task, rendered as a graphical bar with a filled portion to indicate the
progress completed. This element is most useful in combination with JavaScript to dynamically update its
value as progress is made in an application, animating the bar filling up to completion.
The progress can be indeterminate with no specified value, indicating that progress is being made but that
it's not yet clear how much work is left before the task is done. For example, you might display an
indeterminate progress bar while waiting for a response from a server before a process can begin:
<p>Upload: <progress>starting...</progress></p>
Or the progress can be a number in the range of zero to a maximum, giving the portion of work that has
been completed thus far, specified by the optional value and max attributes:
<p>Processing: <progress max="100" value="77">77%</progress</p>
The progress element doesn't have a min attribute; the minimum is always 0. The maximum can be any
positive number you like, and the value attribute must fall within the specified range. For rendering
purposes, any value less than 0 is treated as 0, and any value greater than the maximum is treated as
equal to the maximum. The default maximum is 1, hence the value must be a decimal in the range of 0 to
1 if the max attribute is absent.
This is a phrasing element that requires both a start and end tag, and may contain only text and other
phrasing elements. As with the meter element, browsers that support the progress element will render a
graphical bar, shown in Figure 8-31. Older and non-supporting browsers will display the element's
contents, so that content should communicate the same value to offer a readable fallback:
<p>Check out: <progress max="5" value="3">Step 3 of 5</progress></p>