Java Reference
In-Depth Information
Remember that an
<input/>
element's
value
is string data—even if that string contains a number.
Therefore, you need to convert the string into a numeric value. The
parseFloat()
function should
be used here because floating‐point numbers are valid values for a
range
's
min
,
max
, and
step
properties.
Finally, you display
slider
's value.
output.innerHTML = slider.value;
}
new elements
HTML5 also introduces three new form controls:
➤
<output/>
is used to display the result of a calculation.
➤
<meter/>
is a graphical display of a value.
➤
<progress/>
represents the completion progress of a task.
The
<output/>
element is more of a traditional form control in that it has to be associated with a
form; it can reside within a form or you can provide a form's
id
as the value of its
form
attribute.
The
<meter/>
and
<progress/>
elements, however, have no such requirement. They can appear
anywhere within the document without any form association.
The <output/> element
The
<output/>
element represents the result of a particular calculation or user action. No graphics
or styling are associated with the element; it simply displays text (although you can apply styling
with CSS).
At the heart of the
<output/>
element is its
value
property. Like a typical form control, the
value
property lets you get and set the value of the control, and setting the
value
visually updates the
control to display whatever value you assigned to the property. But unlike typical form controls, the
<output/>
element does not have a
value
attribute. The value of the element is instead represented
by a text node between the opening and closing
<ouput>
tags. For example:
<output name="result" id="result" for="field1 field2">10</output>
IE11 and below do not officially support the
<output/>
element, and setting the
value
property
will result in an error. You might work around this issue by still using the
<output/>
element
and settings its “value” with
innerHTML
. However, this workaround is not standard and is not
recommended.
Finally, the
<output/>
element should be associated with fields involved in the result of calculations
that the
<output/>
displays. You do this with the familiar
for
attribute. In the previous HTML, the
<output/>
element is associated with
field1
and
field2
.
