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:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  6. <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
  7. Remove this if you use the .htaccess -->
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  10. <title>templates</title>
  11. <meta name="description" content="" />
  12. <meta name="author" content="Vijay" />
  14. <meta name="viewport" content="width=device-width; initial-scale=1.0" />
  16. <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  17. <link rel="shortcut icon" href="/favicon.ico" temp_href="/favicon.ico" />
  18. <link rel="apple-touch-icon" href="/apple-touch-icon.png" temp_href="/apple-touch-icon.png" />
  19. </head>
  21. <body>
  22. <div style="font-family: Verdana; font-size: 22">
  23. <header>
  24. <h1 align="center" style="color: gray">DataList Tag - Html 5</h1>
  25. </header>
  26. <div>
  27. <p> Question Arises: <b>What is DataList Tag</b></p>
  28. <p style="color: blue">In Simple Terms "It Provides an AutoComplete Feature with a specific Html Control"</p><br>
  29. <ul style="text-align: center">It is Supported in:
  31. <li style="color: red">Mozilla FireFox</li>
  32. <li style="color: red">Opera</li>
  35. </ul>
  36. </div>
  37. <div align="center">
  38. <fieldset><legend>Datalist - HTML 5</legend>
  39. Please Enter Some Values: <input type="text" list="datalist1" required="required" />
  40. <input type="submit" />
  41. <datalist id="datalist1">
  42. <select>
  43. <option value="France">France</option>
  44. <option value="United Kingdom">United Kingdom</option>
  45. <option value="China">China</option>
  46. <option value="USA">USA</option>
  47. <option value="India">India</option>
  49. </select>
  50. </datalist>
  52. </fieldset>
  53. </div>
  54. <footer>
  55. <p align="center" style="color: silver">© Copyright by Vijay Prativadi</p>
  56. </footer>
  57. </div>
  58. </body>
  59. </html>
Step 2: The Output of the Application looks like this:
Clipboard02.jpg



I hope you found this article useful.
I look forward to seeing your comments and feedback.
Thanks!