Java Reference
In-Depth Information
Let's focus only on the lines that changed. First, you add an
id
attribute to the
<form/>
element:
<form id="form1" name="form1">
This addition is only necessary because you define the
<output/>
element outside of the form:
<output id="result" name="result" form="form1" for="slider"></output>
You define the
<output/>
element by setting its
id
and
name
attributes to
result
, the
form
attribute to
form1
, and the
for
attribute to
slider
. The latter isn't absolutely necessary for this example to work,
but the
for
attribute exists so that you can write semantic markup. By setting
for
to
slider
, you (and
readers of your code) know that the
<output/>
element displays the value related to the
range
field.
The next change is the second line of JavaScript code. Instead of retrieving a
<div/>
element, you grab a
reference to your new
<output/>
element:
var output = myForm.result;
Notice the code:
myForm.result
. Even though the
<output/>
element is not inside the form, it is
still associated with the form because of the
for
attribute. Therefore, you can walk the
Form
object
hierarchy to reference the
<output/>
element.
The final change is the last statement of the
formInputChange()
function:
result.value = slider.value;
You set the
<output/>
element's
value
property to the value of
slider
; thus, updating the information
displayed in the page.
The <meter/> and <progress/> elements
As mentioned earlier, the
<meter/>
and
<progress/>
form controls are rather unique in that they
can be used anywhere within a page. It might seem strange to call them “form controls” when
they don't have to be used within a form—they don't even accept user input! Nevertheless, they're
categorized as such.
At first glance, these elements look similar, but they, in fact, serve two different purposes and have a
different set of attributes and properties.
The
<meter/>
element is used to graphically display an individual value within a particular range.
For example, the RPMs of a vehicle's engine, the heat of a CPU, or disk usage indicators are perfect
examples of what the
<meter/>
element is used for.
The
<meter/>
element consists of an opening and closing tag, and you can specify the
low
,
optimum
,
and
high
sections of the meter. These are ranges, mostly for semantic purposes, that affect the
meter's color. You can also set the
min
and
max
of possible values, as well as the
value
of the meter:
<meter min="0" max="150" low="40" optimum="75"
high="100" value="80">80 Units of Something</meter>
