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">© Copyright by Vijay Prativadi</p> </footer> </div> </body> </html>
Step 2: The Output of the Application looks like this:
I hope you found this article useful.
I look forward to see your comments and feedback.
Thanks!
You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.
Become a sharper developer and jumpstart your career.
$0
$
. 00
monthly
For Basic members:
$20
For Premium members:
$45
For Elite members: