Post
Ask Question

DataList Tag in HTML5

Introduction

 
Today, in this article I am going to describe one of the new concepts of HTML5.
 
In this article, we will be learning how to create a DataList in HTML5 using the <datalist> tag.
 

Datalist Tag in HTML5

 
The Datalist Tag is new in HTML5. The <datalist> tag defines a list of selectable data as a dropdown list of input values that contain only legal values. The Dropdown list is displayed when the user places the focus on the TextBox. It specifies a list of predefined options for an <input> element. The <datalist> tag is used to provide an "autocomplete" feature of <input> elements.
 
Users will see a drop-down list of pre-defined options as they input data.
 
Syntax
 
<datalist id="value">options</datalist>
 
Here the id attribute binds the datalist options with the list.
 
Browser Support
 
The <datalist> tag is supported in all major browsers, except Internet Explorer and Safari.
 
Complete Source Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <title>  
  5.          Datalist in HTML5  
  6.       </title>  
  7.    </head>  
  8.    <body>  
  9.       <h1 align="center" style=color:"Black">DataList Tag in HTML5</h1>  
  10.       <p align="center">  
  11.          Enter your Choice:  
  12.          <input type ="text" list="Match"/>  
  13.          <input type ="submit">  
  14.          <datalist id= "Match">  
  15.             <select>  
  16.                <option value="Test Match">Test Match</option>  
  17.                <option value="One Day">One Day</option>  
  18.                <option value="Twenty Twenty">Twenty Twenty</option>  
  19.             </select>  
  20.          </datalist>  
  21.       <p>  
  22.       <p align="center"><b>Note:</b>This tag is not supported by Internet Explorer and Safari.</p>  
  23.    </body>  
  24. </html> 
Output
 
datalist.jpg


Similar Articles