Reader Level:
ARTICLE

Datalist Tag in HTML5

Posted by Vijay Prativadi Articles | HTML 5 February 11, 2012
Today, in this article let’s learn one more concept in HTML5. This concept enables to make auto completion task easy and flexible code designing.
  • 0
  • 0
  • 4451

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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
 
 
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
  <title>templates</title
>
  <meta name="description" content="" />
  <meta name="author" content="Vijay" />
 
  <meta name="viewport" content="width=device-width; initial-scale=1.0"
/>
 
 
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico" temp_href="/favicon.ico" />

  <link rel="apple-touch-icon" href="/apple-touch-icon.png" temp_href="/apple-touch-icon.png" />
</head>
 
<body>
  <div style="font-family: Verdana; font-size: 22">
    <header>
      <h1 align="center" style="color: gray">DataList Tag - Html 5</h1>
    </header>
       <div>
    <p> Question Arises: <b>What is DataList Tag</b></p>
    <p style="color: blue">In Simple Terms "It Provides an AutoComplete Feature with a specific Html Control"</p><br>
    <ul style="text-align: center">It is Supported in:
      
       <li style="color: red">Mozilla FireFox</li
>
       <li style="color: red">Opera</li>
      
      
    </ul
>
    </div>
       <div align="center">
              <fieldset><legend>Datalist - HTML 5</legend>
              Please Enter Some Values: <input type="text" list="datalist1"  required="required" />
              <input type="submit" />
              <datalist id="datalist1">
                     <select>
                     <option value="France">France</option>
                     <option value="United Kingdom">United Kingdom</option>
                     <option value="China">China</option>
                     <option value="USA">USA</option>
                     <option value="India">India</option>
                    
                     </select
>
              </datalist>
             
              </fieldset
>
       </div>
    <footer>
     <p align="center" style="color: silver">&copy; Copyright  by Vijay Prativadi</p>
    </footer>
  </div>
</body>
</
html>

Step 2: The Output of the Application looks like this:

Clipboard02.jpg


I hope you found this article useful. 

I look forward to see your comments and feedback. 

Thanks!

COMMENT USING

Trending up