HTMP Part - 4

Understanding HTML 5 Datalist control

Datalist is a new tag in HTML 5 which will let us add autocomplete feature to an input textbox.

It’s a simple 3 step task.

Step 1 – Create Datalist

<datalist id="Hobbies">

    <option>Reading books</option>

    <option>Watching movies</option>

    <option>Playing games</option>

</datalist>

Step 2 – Create input control and bind the list

<input type="text" name="TxtHobbies" value="" list="Hobbies" />

Step 3 –Execute and Test

Click here if you are interested in learning how to make datalist dynamic using Asp.net MVC.

Output element

Calculation is the integral part of every application and sometime we often display those calcualted values in the UI. Before HTML 5 there was no standard element for displaying such results. Some people were using “span”, somewhere using “div” whereas some were using “disabled input textbox”.

It will be very difficult for anyone to understand the purpose of a tag/element/control just by looking at it.

In HTML 5 this problem is solved by introduction of a standard and semantic markup called “Output”.

 Collapse | Copy Code

<div oninput=

        "document.getElementById(MyOutputElement).value =

        (document.getElementById('input1').valueAsNumber) +

        (document.getElementById('input2').valueAsNumber)">

    <input id="input1" name="input1" type="number" value="1"> +

    <input id="input2" name="input2" type="number" value="2"> =

    <output id="MyOutputElement">3</output>

</div>

Note: Just like to lab2 markups, Output element won’t provide any special advantage other than adding semantic meaning to our UI.

           Source collected from Codeproject.com