HTML and CSS Reference
In-Depth Information
It takes the following floating-point attributes:
•
value—the “measured” value shown by meter
•
min—the lower bound of the range for the meter
•
low—the point that marks the upper boundary of the “low”
segment of the meter
•
high—the point that marks the lower boundary of the “high”
segment of the meter
•
max—the upper bound of the range for the meter
•
optimum—the point that marks the “optimum” position for
the meter
Only
value
is required. If
min
and
max
are missing, the range 0 to
1 is assumed
Opera and Chrome (the two browsers that support
<progress>
and
<meter>
at the time of this writing) colour the meter differ-
ently if the
value
is between the
low
to
high
values.
In older browsers, the text content of the elements is displayed
as fallback content.
It's pretty confusing to work out which attributes go with which
input types when you're meeting them all at once as we are
here. But it's actually quite straightforward when you start using
them. For example, you can't use
min
and
max
on a
<textarea>
,
because that wouldn't make sense, but you can use
required
.
A blog comments form
Let's look at a classic form example that most of us are already
familiar with. Nearly all blogs have a comment section, with
fields for the commenter's name (required), her email address
(required), URL (optional), and the comment (required). That
would need a fair bit of JavaScript if we were to do our form
validation by hand.
In HTML5, however, we need only use some new form types.
We also add a submit button—currently browsers only show vali-
dation messages when a form is actually submitted.
