The datalist Element

In HTML 5 form elements play an integral part in creating Web applications. The HTML 5 specification has drafted a new architecture that includes new form elements.

You can create a list of options by using the <datalist> tag in the form. The datalist element provides an autocomplete feature, which means that it allows you to select an input from the predefined options. For example, if you HTML into the search box on Google Web search, it displays various options that start from the HTML in the drop-down list.

The datalist element is combined with the input element. There is a link created by the list attribute of the input element and referenced by the ID attribute of the datalist element. You can use the <option> tag to fill the list.

Let’s do the following steps to create a list of options:


<!DOTYPE html>
<head>
    <title>Showing the list of values</title>
</head>
<body>
<center>
    <h2>Example of list </h2>
    <img src=”list.jpg” alt=”search” />
    <form>
<input type=”text” name=”number” list=”numbers” style=”border:2px dotted green; aoutline: 2px solid #f00; color:red; >
<datalist id=”number”>
        <option value=”animate”>Animation</option>
        <option value=”infotech”>Information Technology</option>
        <option value=”media”> Multimedia</option>
        <option value=”bio”>Biology</option>
        <option value=”chem”>Chemistry</option>
        <option value=”physics”>Physics</option>
        </datalist>
    </form>
</center>
</body>
</html>

Save the document with the name Datalist.html and open on browser.

PRV MENU NEXT

The datalist Element

Latest Post