HTML5 Input and Output Elements

0
20

Image

 

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/>

</form>

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

oniput

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

for=”i1 i2″

Result

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here