Share on Google+Share on Google+

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

Advertisement
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:

Advertisements

Posted on: September 7, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.