Create a beautiful pop down list using HTML5 datalist tag


        HTML 5 datalist tag is most widely used in the HTML 5 forms. Datalist got derived from the list of pre-defined elements, which will get displayed when user starts entering the input.  
       Lets learn with one of the practical example;

       You might have seen, while choosing the source station and destination station on the Indian railways website, by just typing few characters of station name, the complete station name can be seen in the list. 

indian railways
Indian Railways

        Above image is best self-explanatory, when user types del, Delhi station is shown in the list.
   
Syntax:

<form>

<input list="stations" name="stations">

<datalist id="stations">

<option value="ADRSH NGR DELHI- ANDI">
<option value="BANDEL JN- BDC">
<option value="BODELI- BDE">
<option value="DELANG- DEG">
<option value="DELHI- DLI">

</datalist>

<input type="submit">

</form>