Learn HTML – Part 46 – datalist Tag – Input Suggestions

The HTML datalist tag is used to provide a list of predefined options for an input field.

It allows users to either select from the suggested options or type their own value.

What is the datalist Tag?

The datalist element contains a list of predefined options that appear as suggestions when a user types in an input field.

It works together with the input element using the list attribute.

Basic Syntax

<input list="items">

<datalist id="items">
   <option value="Item 1">
   <option value="Item 2">
   <option value="Item 3">
</datalist>

Example – Input Suggestions

<label for="browser">Choose a browser:</label><br>

<input list="browsers" id="browser">

<datalist id="browsers">
   <option value="Google Chrome">
   <option value="Mozilla Firefox">
   <option value="Microsoft Edge">
   <option value="Safari">
</datalist>

Output:

Choose a browser:

How datalist Works

• The input element uses the list attribute.
• The datalist element contains suggested values.
• Each suggestion is defined using the option tag.

Example – Country Suggestions

<label for="country">Select Country:</label><br>

<input list="countries" id="country">

<datalist id="countries">
   <option value="India">
   <option value="United States">
   <option value="United Kingdom">
   <option value="Australia">
</datalist>

Output:

Select Country:

Why Use datalist?

• Provides helpful input suggestions
• Improves user experience
• Reduces typing effort
• Allows both selection and manual input

The datalist tag provides autocomplete suggestions for input fields.

Common Mistakes Beginners Make

• Forgetting to link the input with the datalist using the list attribute
• Using the same id for multiple datalist elements
• Expecting datalist to restrict input values

Conclusion

The HTML datalist tag allows developers to provide suggested values for input fields.

It improves user experience by offering quick autocomplete options while still allowing custom input.

What’s Next?

Now that you understand the datalist tag, the next step is learning about the output tag, which is used to display calculation results.

Next: Learn HTML – Part 47 – output Tag – Display Calculation Result →

Series: Learn HTML Series