HTML 5

Use DataList Tag as Drop Down List in HTML5



A Datalist tag represents a list of options that represent predefined options for other controls. The <datalist> tag can be used in conjunction with an <input> tag that contains a list of selectable data as a drop down list of input values which contains only legal values. DataList is not visible to the user, but it is associated with the <input> tag through the <input> tag list attribute that takes as its value the id attribute value of the <datalist> tag. The drop down predefined list displays when user enters any value in the text field. You can say a <datalist> tag provides an auto-complete feature on form tags.

Syntax<input id="" name="" type="text" list="DataList_ID" />
<datalist id="DataList_ID">
<option value="A">
<option value="B">
<option value="C">
<option value="D">
<option value="E">
</datalist>
  

HTML5 Event Attributes

onabort onblur oncanplay
oncanplaythrough onchange onclick
oncontextmenu ondblclick ondrag
ondragend ondragenter ondragleave
ondragover ondragstart ondrop
ondurationchange onemptied onended
onerror onfocus onformchange
onforminput oninput oninvalid
onkeydown onkeypress onkeyup
onload onloadeddata onloadedmetadata
onloadstart onmousedown onmousemove
onmouseout onmouseover onmouseup
onmousewheel onpause onplay
onplaying onprogress onratechange
onreadystatechange onscroll onseeked
onseeking onselect onshow
onstalled onsubmit onsuspend
ontimeupdate onvolumechange onwaiting

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<label for="Flower_list"><b>List of flowers</b></label>
<input id="Flower_list" name="Flower_list" type="text" list="Flowers" />
<datalist  id="Flowers">
<option value="Allium 'drumstick'"></option>
<option value="Anemone 'Galilee'"></option>
<option value="Artichoke thistle"></option>
<option value="Baby's breath"></option>
<option value="Bachelor's button"></option>
<option value="Bells of Ireland"></option>
<option value="Bighead knapweed"></option>
<option value="Billy buttons"></option>
<option value="Bird of paradise"></option>
<option value="Blue lace flower"></option>
<option value="Boronia "></option>
<option value="Bouvardia"></option>     
<option value="Boxwood african"></option>
<option value="Breath of heaven - Diosma"></option>
<option value="Buckthorn variegated"></option>
<option value="Button Funray"></option>
<option value="California pepperberry"></option>
<option value="Calla lily white"></option>
<option value="Candytuft"></option>
<option value="Carnation mini - Alibi"></option>
<option value="Casa Blanca"></option>
<option value="Caspia"></option>
<option value="Cockscomb crested"></option>
<option value="Coffee bean berry"></option>
<option value="Common Myrtle"></option>
<option value="Common Yarrow"></option>
<option value="Cone flower"></option>
<option value="Cosmos"></option>
<option value="Curcuma"></option>
<option value="Cymbidium orchid"></option>
<option value="Daffodil"></option>
<option value="Dahlia"></option>
<option value="Delphinium Belladonna"></option>
<option value="Delphinium Pacific Giant"></option>
<option value="Eric John"></option>
<option value="Eucalyptus seeded"></option>
<option value="Eucalyptus silver dollar"></option>
<option value="Fernleaf Yarrow"></option>
<option value="Feverfew"></option>
<option value="Flax New Zealand"></option>
<option value="Foxtail fern"></option>
<option value="Freesia"></option>
<option value="Gardenia"></option>
<option value="Gayfeather"></option>
<option value="Gerbera daisy"></option>
<option value="Gerbera Ruby Red"></option>
<option value="Godetia"></option>
<option value="Goldenrod"></option>
<option value="Heather"></option>
<option value="Hydrangea"></option>
<option value="Ivy"></option>
<option value="Japhette orchid"></option>
<option value="Kangaroo paw yellow"></option>
<option value="Lace fern"></option>
<option value="Larkspur pink"></option>
<option value="Lavender"></option>
<option value="Lily Casa Blanca"></option>
<option value="Lily Elite"></option>
<option value="Lily Monte Negro"></option>
<option value="Lily of the Nile – Alba"></option>
<option value="Lily of the valley"></option>
<option value="Lily Stargazer"></option>
<option value="Lisianthus misty blue"></option>
<option value="Love in a mist"></option>
<option value="Lumex"></option>
<option value="Marguerite daisy"></option>
<option value="Melaleuca"></option>
<option value="Mimosa"></option>
<option value="Ming fern"></option>
<option value="Misty blue Limonium"></option>
<option value="Monkshood"></option>
<option value="Montbretia"></option>
<option value="Monte Cassino"></option>
<option value="Moon orchid"></option>
<option value="Nerine"></option>
<option value="Paper Reed"></option>
<option value="Papyrus lion's head"></option>
<option value="Peony"></option>
<option value="Peruvian lily"></option>
<option value="Phlox"></option>
<option value="Pincushion"></option>
<option value="Pincushion flower annual"></option>
<option value="Pink Mink"></option>
<option value="Pitt Variegated"></option>
<option value="Queen Anne's lace"></option>
<option value="Ranunculus"></option>
<option value="Red Rover"></option>
<option value="Rice flower"></option>
<option value="Rose Bridal Pink"></option>
<option value="Rose Bridal White"></option>
<option value="Rose Champagne"></option>
<option value="Rose Diadem"></option>
<option value="Rose Emblem"></option>
<option value="Rose Fantasy"></option>
<option value="Rose Fire & Ice"></option>
<option value="Rose Kardinal"></option>
<option value="Rose Lady Liberty"></option>
<option value="Rose Lavanda"></option>
<option value="Rose Osiana"></option>
<option value="Rose Royalty"></option>
<option value="Safari Sunset"></option>
<option value="Safflower"></option>
<option value="Sage perennial"></option>
<option value="Salmon Reagan"></option>
<option value="Saponaria"></option>
<option value="Saxicola"></option>
<option value="Snapdragon apple blossom"></option>
<option value="Snapdragon magenta"></option>
<option value="Solidaster"></option>
<option value="Speedwell"></option>
<option value="Spider Fuji Yellow"></option>
<option value="Sprengeri fern"></option>
<option value="Star of Bethlehem"></option>
<option value="Statice blue"></option>
<option value="Stephanotis"></option>
<option value="Stock lavender"></option>
<option value="Strawberry banksia"></option>
<option value="Strawflower"></option>
<option value="Summer poinsettia"></option>
<option value="Sunflower Sunbright"></option>
<option value="Sweet pea"></option>
<option value="Sweet William"></option>
<option value="Sword fern"></option>
<option value="Telstar"></option>
<option value="Thorow-wax"></option>
<option value="Tracelium"></option>
<option value="Tuberose"></option>
<option value="Tulip pink"></option>
<option value="Watsonia"></option>
<option value="Waxflower"></option>
<option value="Willow curly"></option>
</datalist>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<form action="http://www.c-sharpcorner.com/" method="get">
<label for="list"><b>Our Network :</b></label>
<input id="list" type="url" list="networK_list" name="link" />
<datalist id="networK_list">
 <option label="CsharpCorner" value="http://www.c-sharpcorner.com/"></option>
 <option label="VbDotNetHeaven" value="http://www.vbdotnetheaven.com/"/>
 <option label="DotNetHeaven" value="http://www.dotnetheaven.com/" />
 <option label="DbTalks" value="http://www.dbtalks.com/" />
 <option label="LongHornCorner." value="http://www.longhorncorner.com/"/>
 <option label="MindCracker" value="http://www.mindcracker.com/" />
 <option label="InterviewCorner" value="http://www.interviewcorner.com/"/>
</datalist>
<input type="Submit" value="Click Here" />
</form>
 </body>
</html>

Output

Fire Fox

DataList Tag


DataList Tag

When you enter an unknown URL you will get an error from FireFox only but Opera will not show an error and it will navigate you to your specified URL (that you used in the action attribute).

DataList Tag

Opera

DataList Tag

DataList Tag

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs