output element represents the output of a calculation or process, performed usually by a script. This calculation may be based on the values of
form fields, in which case, the
for attribute becomes semantically useful for referencing the elements or controls that took part in the process.
In this example, we'll use the
output element to show the result of a power operation between the numbers provided by a couple of number inputs. The operation will be carried by a client-side script defined elsewhere.
Note how the
output element makes reference to both fields participating in the operation, by listing their
id attributes in
for. The controls, in the other hand, have their
id attributes properly declared, for the
output to make the reference and the script to retrieve their values.
<p>Base: <input type="number" id="base" value="0" min="0" max="30"></p> <p>Exponent: <input type="number" id="exponent" value="0" min="0" max="30"></p> <p><input type="button" value="Calculate" onclick="outputPower()"></p> <p>Result: <output id="power" for="base exponent"></output></p>
Now, we'll simulate the reaction of people to the volume of music, using a range control, new in HTML5. The idea is to get the value of the range input and, based on it, show the public's response in the
<p>Volume of music: <input type="range" id="volumeofmusic" onchange="outputAudienceReaction()"></p> <p>Audience reaction: <output id="audiencereaction" for="volumeofmusic"></output></p>
Volume of music:
Lastly, we'll simulate a registration
form, where a script checks immediately if the picked username isn't already registered in the website. Of course, this script doesn't have a database to check against, so it will just simulate the result randomly.
<p> Username: <input type="text" id="username" onkeyup="outputUsername()"> <output id="usernameavailability" for="username"></output> </p>
A list of space-separated tokens matching the values of the
id attributes of the elements or controls participating in the calculation or process. This attribute is purely semantic.
<p> Word: <input type="text" id="word" onkeyup="searchSynonyms()"> <output id="synonyms" for="word"></output> </p>
The value of the
id attribute of the form with which this control is associated to.
This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.
<form id="form1" oninput="suggestSimilar()"> <p><input type="text" id="car" name="car"></p> </form> <p><output id="suggestions" for="car" form="form1"></output></p>
A name for the
output to be used in
form submission and client-side scripting.
Currently, the value
isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.
<p> Number: <input type="number" id="number" onkeyup="getSquareRoot()"> <output id="squareroot" name="squareroot" for="number"></output> </p>
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.