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:
![Clipboard02.jpg]()
I hope you found this article useful.
I look forward to see your comments and feedback.
Thanks!