Post
Ask Question

The "datalist" Tag in HTML5

The "datalist" Tag in HTML5

 
The <datalist> tag is used with the input field for providing a list of suggestions or autocompletes property. A user can select a value from the list of values or can input their own value. Now we use the <datalist> tag in our application. We write the following code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4. City   
  5.         <input list="city" type="text" />  
  6.         <datalist id="city">  
  7.             <option value="Varanasi">  
  8.                 <option value="Jhansi">  
  9.                     <option value="Delhi">  
  10.                         <option value="Gurgaon">  
  11.                         </datalist>  
  12.                     </body>  
  13.                 </html>  
Now we run the code. The output will look like below:
 
datalist tag in html5
 
Now we enter the city name. Here we note that when we press v (Button v) to write Varanasi as city name, then a drop-down list is displayed with Varanasi as an option. This happens with all four city names which are defined as an option for the list. Suppose, I want to write Varanasi as city name, Then the output will look like the below figure:
 
datalist tag in html5
Next Recommended Reading figure tag in HTML5