HTML5 datalist tag, Definition of <datalist> tag in html5


 

HTML5 datalist tag, Definition of <datalist> tag in html5

In this illustration we will discuss use of <datalist> tag and its implementation.

In this illustration we will discuss use of <datalist> tag and its implementation.

HTML5 datalist tag, Definition of <datalist> tag in html5

In this illustration we will discuss use of <datalist> tag and its implementation. The <datalist> tag is used to define the list of selectable data as a drop down list of input values which contains only legal values. The drop down list is displays when user place focus on the text field . The option and the datalist should not be displayed. when user enter the value in the text field then option list displayed to the user with predefined values. The <datalist>  tag is used with the <input> tag using "list" attribute.

Declaration Syntax: 

<datalist id="value">options </datalist>

This is the new tag  in html5 and have no element specific attribute. Here the id attribute is used to bind the datalist options with the list.

Example: Datalist_tag.html.

<!DOCTYPE html>
<html>
  <head>
      <title>Example of datalist Tag</title>
  </head>
<body>
   Enter Your title:
   <input type="text" list="title" />
     <datalist id="title">
         <option value="Mr.">
       <option value="Mrs.">
       <option value="Km.">
     </datalist>
</body> 
</html>

Output:

Note: This code render  by Opera9.5 browser . check availability of browser.

Download This Example:

Ads