Post
Ask Question

Datalist Tag in HTML5

Introduction

 
Today, in this article let's learn one more concept in HTML5. 
 
In this article, we will learn how to create a DataList in HTML 5 using the Datalist tag. 
 

What is Datalist Tag in Html 5?

 
In simple terms, "It enables to perform auto-completion with specific HTML targeted control".
 
Let's see how we can create and use a Datalist in HTML 5. 
 
Step 1: The Complete Code of Datalist.html looks like this:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8" />  
  5.    
  6.   <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame  
  7.        Remove this if you use the .htaccess -->  
  8.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
  9.    
  10.   <title>templates</title>  
  11.   <meta name="description" content="" />  
  12.   <meta name="author" content="Vijay" />  
  13.    
  14.   <meta name="viewport" content="width=device-width; initial-scale=1.0" />  
  15.    
  16.   <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->  
  17.   <link rel="shortcut icon" href="/favicon.ico" temp_href="/favicon.ico" />  
  18.   <link rel="apple-touch-icon" href="/apple-touch-icon.png" temp_href="/apple-touch-icon.png" />  
  19. </head>  
  20.    
  21. <body>  
  22.   <div style="font-family: Verdana; font-size: 22">  
  23.     <header>  
  24.       <h1 align="center" style="color: gray">DataList Tag - Html 5</h1>  
  25.     </header>  
  26.        <div>  
  27.     <p> Question Arises: <b>What is DataList Tag</b></p>  
  28.     <p style="color: blue">In Simple Terms "It Provides an AutoComplete Feature with a specific Html Control"</p><br>  
  29.     <ul style="text-align: center">It is Supported in:  
  30.         
  31.        <li style="color: red">Mozilla FireFox</li>  
  32.        <li style="color: red">Opera</li>  
  33.         
  34.         
  35.     </ul>  
  36.     </div>  
  37.        <div align="center">  
  38.               <fieldset><legend>Datalist - HTML 5</legend>  
  39.               Please Enter Some Values: <input type="text" list="datalist1"  required="required" />  
  40.               <input type="submit" />  
  41.               <datalist id="datalist1">  
  42.                      <select>  
  43.                      <option value="France">France</option>  
  44.                      <option value="United Kingdom">United Kingdom</option>  
  45.                      <option value="China">China</option>  
  46.                      <option value="USA">USA</option>  
  47.                      <option value="India">India</option>  
  48.                       
  49.                      </select>  
  50.               </datalist>  
  51.                
  52.               </fieldset>  
  53.        </div>  
  54.     <footer>  
  55.      <p align="center" style="color: silver">© Copyright  by Vijay Prativadi</p>  
  56.     </footer>  
  57.   </div>  
  58. </body>  
  59. </html> 
Step 2: The Output of the Application looks like this:
Clipboard02.jpg



I hope you found this article useful. 
 
I look forward to seeing your comments and feedback. 
 
Thanks!


Similar Articles
MVC Corporation
MVC Corporation is consulting and IT services based company.