HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <datalist> Tag


Concept

The <datalist> tag in HTML is used to provide a predefined set of options for an <input> element. It allows users to select from a list of suggestions as they type, enhancing the user experience in form filling. The <datalist> tag is connected to the <input> element via the list attribute, and the options are defined using the <option> tags within the <datalist>.

Implementation

Example 1: Selecting a Fruit from a List

Here’s an example of how you can use the <datalist> tag to create a dropdown list of fruits for the user to select:

<label for="fruits">Choose a fruit:</label> <input list="fruits" name="fruit" id="fruit"> <datalist id="fruits">   <option value="Apple">   <option value="Banana">   <option value="Cherry"> </datalist> 

Example 2: Selecting a Country from a List

You can also use the <datalist> tag to create a dropdown list of countries:

<label for="countries">Choose a country:</label> <input list="countries" name="country" id="country"> <datalist id="countries">   <option value="United States">   <option value="United Kingdom">   <option value="Canada"> </datalist> 
Loading

Attributes


Global Attributes

The <datalist> tag supports all the global attributes in HTML.

Event Attributes

The <datalist> tag also supports all the event attributes in HTML.

Browser Support

Browser Support
Chrome 20.0
Firefox 10.0
Safari 4.0
Opera 12.1
IE 9.5

Default CSS Settings

Most browsers will display the <datalist> element with the following default CSS settings:

datalist {   display: none; } 

Conclusion

The <datalist> tag is a powerful tool for enhancing user experience in form filling.


By providing a predefined set of options, it guides the user’s input and helps prevent errors. It’s particularly useful in scenarios where the input needs to be restricted to a specific set of values, such as selecting a country or a product from a catalog.