Post
Ask Question

Use DataList Tag as Drop Down List in HTML5

Introduction

 
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 that 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 the 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:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <title></title>  
  6.     </head>  
  7.     <body>  
  8.         <label for="Flower_list">  
  9.             <b>List of flowers</b>  
  10.         </label>  
  11.         <input id="Flower_list" name="Flower_list" type="text" list="Flowers" />  
  12.         <datalist  id="Flowers">  
  13.             <option value="Allium 'drumstick'"></option>  
  14.             <option value="Anemone 'Galilee'"></option>  
  15.             <option value="Artichoke thistle"></option>  
  16.             <option value="Baby's breath"></option>  
  17.             <option value="Bachelor's button"></option>  
  18.             <option value="Bells of Ireland"></option>  
  19.             <option value="Bighead knapweed"></option>  
  20.             <option value="Billy buttons"></option>  
  21.             <option value="Bird of paradise"></option>  
  22.             <option value="Blue lace flower"></option>  
  23.             <option value="Boronia "></option>  
  24.             <option value="Bouvardia"></option>  
  25.             <option value="Boxwood african"></option>  
  26.             <option value="Breath of heaven - Diosma"></option>  
  27.             <option value="Buckthorn variegated"></option>  
  28.             <option value="Button Funray"></option>  
  29.             <option value="California pepperberry"></option>  
  30.             <option value="Calla lily white"></option>  
  31.             <option value="Candytuft"></option>  
  32.             <option value="Carnation mini - Alibi"></option>  
  33.             <option value="Casa Blanca"></option>  
  34.             <option value="Caspia"></option>  
  35.             <option value="Cockscomb crested"></option>  
  36.             <option value="Coffee bean berry"></option>  
  37.             <option value="Common Myrtle"></option>  
  38.             <option value="Common Yarrow"></option>  
  39.             <option value="Cone flower"></option>  
  40.             <option value="Cosmos"></option>  
  41.             <option value="Curcuma"></option>  
  42.             <option value="Cymbidium orchid"></option>  
  43.             <option value="Daffodil"></option>  
  44.             <option value="Dahlia"></option>  
  45.             <option value="Delphinium Belladonna"></option>  
  46.             <option value="Delphinium Pacific Giant"></option>  
  47.             <option value="Eric John"></option>  
  48.             <option value="Eucalyptus seeded"></option>  
  49.             <option value="Eucalyptus silver dollar"></option>  
  50.             <option value="Fernleaf Yarrow"></option>  
  51.             <option value="Feverfew"></option>  
  52.             <option value="Flax New Zealand"></option>  
  53.             <option value="Foxtail fern"></option>  
  54.             <option value="Freesia"></option>  
  55.             <option value="Gardenia"></option>  
  56.             <option value="Gayfeather"></option>  
  57.             <option value="Gerbera daisy"></option>  
  58.             <option value="Gerbera Ruby Red"></option>  
  59.             <option value="Godetia"></option>  
  60.             <option value="Goldenrod"></option>  
  61.             <option value="Heather"></option>  
  62.             <option value="Hydrangea"></option>  
  63.             <option value="Ivy"></option>  
  64.             <option value="Japhette orchid"></option>  
  65.             <option value="Kangaroo paw yellow"></option>  
  66.             <option value="Lace fern"></option>  
  67.             <option value="Larkspur pink"></option>  
  68.             <option value="Lavender"></option>  
  69.             <option value="Lily Casa Blanca"></option>  
  70.             <option value="Lily Elite"></option>  
  71.             <option value="Lily Monte Negro"></option>  
  72.             <option value="Lily of the Nile – Alba"></option>  
  73.             <option value="Lily of the valley"></option>  
  74.             <option value="Lily Stargazer"></option>  
  75.             <option value="Lisianthus misty blue"></option>  
  76.             <option value="Love in a mist"></option>  
  77.             <option value="Lumex"></option>  
  78.             <option value="Marguerite daisy"></option>  
  79.             <option value="Melaleuca"></option>  
  80.             <option value="Mimosa"></option>  
  81.             <option value="Ming fern"></option>  
  82.             <option value="Misty blue Limonium"></option>  
  83.             <option value="Monkshood"></option>  
  84.             <option value="Montbretia"></option>  
  85.             <option value="Monte Cassino"></option>  
  86.             <option value="Moon orchid"></option>  
  87.             <option value="Nerine"></option>  
  88.             <option value="Paper Reed"></option>  
  89.             <option value="Papyrus lion's head"></option>  
  90.             <option value="Peony"></option>  
  91.             <option value="Peruvian lily"></option>  
  92.             <option value="Phlox"></option>  
  93.             <option value="Pincushion"></option>  
  94.             <option value="Pincushion flower annual"></option>  
  95.             <option value="Pink Mink"></option>  
  96.             <option value="Pitt Variegated"></option>  
  97.             <option value="Queen Anne's lace"></option>  
  98.             <option value="Ranunculus"></option>  
  99.             <option value="Red Rover"></option>  
  100.             <option value="Rice flower"></option>  
  101.             <option value="Rose Bridal Pink"></option>  
  102.             <option value="Rose Bridal White"></option>  
  103.             <option value="Rose Champagne"></option>  
  104.             <option value="Rose Diadem"></option>  
  105.             <option value="Rose Emblem"></option>  
  106.             <option value="Rose Fantasy"></option>  
  107.             <option value="Rose Fire & Ice"></option>  
  108.             <option value="Rose Kardinal"></option>  
  109.             <option value="Rose Lady Liberty"></option>  
  110.             <option value="Rose Lavanda"></option>  
  111.             <option value="Rose Osiana"></option>  
  112.             <option value="Rose Royalty"></option>  
  113.             <option value="Safari Sunset"></option>  
  114.             <option value="Safflower"></option>  
  115.             <option value="Sage perennial"></option>  
  116.             <option value="Salmon Reagan"></option>  
  117.             <option value="Saponaria"></option>  
  118.             <option value="Saxicola"></option>  
  119.             <option value="Snapdragon apple blossom"></option>  
  120.             <option value="Snapdragon magenta"></option>  
  121.             <option value="Solidaster"></option>  
  122.             <option value="Speedwell"></option>  
  123.             <option value="Spider Fuji Yellow"></option>  
  124.             <option value="Sprengeri fern"></option>  
  125.             <option value="Star of Bethlehem"></option>  
  126.             <option value="Statice blue"></option>  
  127.             <option value="Stephanotis"></option>  
  128.             <option value="Stock lavender"></option>  
  129.             <option value="Strawberry banksia"></option>  
  130.             <option value="Strawflower"></option>  
  131.             <option value="Summer poinsettia"></option>  
  132.             <option value="Sunflower Sunbright"></option>  
  133.             <option value="Sweet pea"></option>  
  134.             <option value="Sweet William"></option>  
  135.             <option value="Sword fern"></option>  
  136.             <option value="Telstar"></option>  
  137.             <option value="Thorow-wax"></option>  
  138.             <option value="Tracelium"></option>  
  139.             <option value="Tuberose"></option>  
  140.             <option value="Tulip pink"></option>  
  141.             <option value="Watsonia"></option>  
  142.             <option value="Waxflower"></option>  
  143.             <option value="Willow curly"></option>  
  144.         </datalist>  
  145.         <br />  
  146.         <br />  
  147.         <br />  
  148.         <br />  
  149.         <br />  
  150.         <br />  
  151.         <br />  
  152.         <br />  
  153.         <form action="http://www.c-sharpcorner.com/" method="get">  
  154.             <label for="list">  
  155.                 <b>Our Network :</b>  
  156.             </label>  
  157.             <input id="list" type="url" list="networK_list" name="link" />  
  158.             <datalist id="networK_list">  
  159.                 <option label="CsharpCorner" value="http://www.c-sharpcorner.com/"></option>  
  160.                 <option label="VbDotNetHeaven" value="http://www.vbdotnetheaven.com/"/>  
  161.                 <option label="DotNetHeaven" value="http://www.dotnetheaven.com/" />  
  162.                 <option label="DbTalks" value="http://www.dbtalks.com/" />  
  163.                 <option label="LongHornCorner." value="http://www.longhorncorner.com/"/>  
  164.                 <option label="MindCracker" value="http://www.mindcracker.com/" />  
  165.                 <option label="InterviewCorner" value="http://www.interviewcorner.com/"/>  
  166.             </datalist>  
  167.             <input type="Submit" value="Click Here" />  
  168.         </form>  
  169.     </body>  
  170. </html>  
Output
 
FireFox
 
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


Similar Articles