HTML and CSS Reference
In-Depth Information
To see <output> in action, first create a couple of numeric form inputs in
a <fieldset> :
<fieldset>
<legend>Output example</legend>
<label for="one">Number: </label>
<input type="number" name="one">
<label for="two">Range: </label>
<input type="range" name="two" min="0" max="10">
</fieldset>
Now add an <output> element just
before the closing </fieldset> :
<label for="out">Output: </label>
<output id="out" for="one two">
0
</output>
The value goes between the tags
rather than in an attribute as with
an <input> element. The for
attribute indicates the fields
with which the <output> is
associated.
Finally, you need some script to update the <output> element when
there is input. You do this on the parent <fieldset> element:
<fieldset oninput="out.value = one.valueAsNumber + two.valueAsNumber;">
The exact relationship between the <input> elements listed in the for
attribute and the <output> value has to be defined in code. HTML5 doesn't
attempt to guess whether you want to add, subtract, multiply, or calculate
interest. We'll discuss the oninput event later in this chapter.
Search WWH ::




Custom Search