i




 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Using the HTML5 output element
08-23-2011, 04:12 PM (This post was last modified: 08-23-2011 04:13 PM by haider.ali.)
Post: #1
Using the HTML5 output element
The output element represents the results of a calculation.It is a new html5 element that should always be used to display result.


I will explain with its attributes

1)for

Code:
<!DOCTYPE HTML>
<html>
<head>
<tittle> Output element</tittle>
&lt;script type="text/javascript"&gt;
    function calculation() {
        var o = document.getElementById("result");
        var num1 = document.getElementById("num1");
        var num2 = document.getElementById("num2");

        o.value = parseFloat(num1.value) + parseFloat(num2.value);
    }
&lt;/script>
<head>
<body>
<input name="num1" type="number"> +
<input name="num2" type="number"> =
<output name="result" for="num1 num2"></output>
<button onclick="calculation()">Perform Calulation</button>
</body>
</html>

'for' attribute contain a list of space separated input element id's on which output tag is depended .


2)form
Code:
<!DOCTYPE HTML>
<html>
<body>

<form action="" id="numform">
<input name="numa" type="number"> +
<input name="numb" type="number"> =
<button onclick="calculation()">Perform Calulation</button>
</form>
<p>The output element below is outside the form, but still a part of it.</p>
<output name="result" form="numform" onforminput="value=numa.valueAsNumber + numb.valueAsNumber"></output>
</body>
</html&gt;
you can add the calculation function in script tag from above to make it work


Quote


Possibly Related Threads...
Thread: Author Replies Views: Last Post
  Using the HTML5 meter element haider.ali 0 2,521 08-23-2011 03:41 PM
Last Post: haider.ali



User(s) browsing this thread: 1 Guest(s)