HTML5 Input and Output Elements



HTML5 making things simple, here is how a simple form can make basic calculator with minimum lines of code

<form oninput=”out1.value=parseInt(i1.value)+parseInt(i2.value)”>

Value1: <input type=”range” name=”i1″ value=”50″ /><hr/>

Value2:<input type=”range” name=”i2″ value=”20″ /><hr/>

Result:&nbsp;<output name=”out1″ for=”i1 i2″></output><hr/>


Each line is separated with a horizontal rule for better visibility, Here 2 unusual elements from HTML4 used

range and output element

Now have a look value1 is named i1 and is given type range with initial value=50, same way value2 is given 20.

Final Element out1 is populated with form event


, and this is again bounded on last line with final attribute

for=”i1 i2″


While we change any of Value1 or Value2 it will get summed and populate to out1


abhilash, is a programmer by profession and a technology addict with a passion towards browsing , shopping and imaging . My views may be biased on reviews. all images and videos are copyrighted to respective owners.

Add comment

Your Header Sidebar area is currently empty. Hurry up and add some widgets.