The "datalist" Tag in HTML5

Here we will learn the use of "datalist" Tag in HTML5.

Introduction: The <datalist> tag is used with input field for providing list of suggestions or autocomplete property. A user can select a value from list of values or can input their own value. Now we use <datalist> tag in our application. We write the following code

<!DOCTYPE HTML>
<html>
<body>
City <input list="city" type="text" />
<datalist id="city">
<option value="Varanasi">
<option value="Jhansi">
<option value="Delhi">
<option value="Gurgaon">
</datalist>
</body>
</html>

Now we run the code. The output will look like below

datalist tag in html5

Now we enter city name. Here we note that when we press v (Button v) to write varanasi as city name, then a drop-down list is displayed with Varanasi as option. This happens with all four city name which is defined as option for list. Suppose, I want to write varanasi as city name, Then output will be look like below figure

datalist tag in html5