Post
Ask Question

DataList Tag in HTML 5

Introduction

A <datalist> tag can be used to create a simple auto-complete feature for a webpage.

<datalist> is the newly defined HTML tag that came with the HTML 5 specification. By using this <datalist> tag we can define a list of data and then we can bind it with a <input> tag.

A <datalist> tag specifies a list of predefined options for an <input> element. After binding it the user will see a drop-down list in which all the predefined options will be there for the input. When the user types a character or string then the user will automatically get the data depending on the input string or character.

The main feature of this <datalist> tag is to auto-complete the <input> element.

Example

Suppose we have a TextBox for the country.

<input type="text" list="countries" name="country" />

In the preceding input element, we are using the list attribute and we are passing the list of countries. so we will define a list of countries using the <datalist> tag as given below.

<option value="India">India</option>
<option value="United States"></option>
<option value="United Kingdom"></option>
<option value="China"></option>
<option value="Nepal"></option>
<option value="Afghanistan"></option>
<option value="Iceland"></option>
<option value="Indonesia"></option>
<option value="Iraq"></option>
<option value="Ireland"></option>
<option value="Israel"></option>
<option value="Italy"></option>
<option value="Swaziland"></option>

Complete Example

<!DOCTYPE html>
<html lang="en">
    <body>
        Please Select Country: <input type="text" list="countries" name="country" />
        <datalist id="countries">
            <option value="India">India</option>
            <option value="United States"></option>
            <option value="United Kingdom"></option>
            <option value="China"></option>
            <option value="Nepal"></option>
            <option value="Afghanistan"></option>
            <option value="Iceland"></option>
            <option value="Indonesia"></option>
            <option value="Iraq"></option>
            <option value="Ireland"></option>
            <option value="Israel"></option>
            <option value="Italy"></option>
            <option value="Swaziland"></option>
        </datalist>
    </body>
</html>

Output

The output of the code above is given below.

  1. When the page is loaded it will initially look like.
    Localhost
  2. When a character or string is typed into the input element then.
    Input element

Browser Compatibility

The following are the browser versions that fully support <datalist>.

Browser Compatibility

Conclusion

In this article, we studied DataList Tag in HTML 5.


Similar Articles