HTML5 Output Tutorial
HTML5 introduces a new <output> element for the form element that can be used to display the output of a script or calculation.
Let us look at an example. We will set up as simple form that automatically calculates your user’s age when they enter their year of birth.
-> See live example Here
First we will set up an input field with the max value set to the current year and minimum value set to 1911
<p>How old are you?</p>
<p>Enter your year of birth </p >
<input name= “numb” type= “number” max= “2011″ min= “1911″ value= “2011″ />
Now we will add the <output> element and use the onforminput event handler to calculate the age by subtracting the birth year from the current year. The onforminput activates when your user enters something in the input field.
Here is how we set the event handler
onforminput= “value= 2011 – numb.valueAsNumber”
Recall that “numb” is the name attribute of our number input set earlier.
Here is what it looks like when we include it in the <output> tag.
<output name= “result” onforminput= “value= 2011 – numb.valueAsNumber”></output>
Here is the whole markup
<p>How old are you?</p>
<p>Enter your year of birth </p>
<input name= “numb” type= “number” max= “2011″ min= “1911″ value= “2011″ />
<br />
<br />
Answer : <output name= “result” onforminput= “value= 2011 – numb.valueAsNumber”></output><br />
Here is what it looks like
Here is what it looks like when you set the birth year to 1986.
As you can see, the output does not appear in a separate box, but is instead displayed just like the rest of the browser text. If you move the arrows up or down, the answer will change dynamically as the age is recalculated with each new entry.
-> See live example Here