Loading...

HTML Datalist

Sometimes you want suggestions without locking the user into a fixed dropdown. datalist offers autocomplete-style options for an input.

Direct answer

1) Give <datalist id="browsers"> some <option value="…"> children.
2) On the input, set list="browsers".
The user can pick a suggestion or type something else.

Input with datalist suggestions

html
HTML Code 
<label for="browser">Browser</label>
<input id="browser" name="browser" list="browsers" placeholder="Type or choose">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Edge">
<option value="Safari">
</datalist>

Try it

  1. Create an input with a list attribute
  2. Add a matching datalist id with four options
  3. Type and pick suggestions in the browser
  4. Compare with a select that only allows listed values

Easy mistakes

  • Mismatched list / datalist id
  • Expecting datalist to force only listed values (that is closer to select)
  • Forgetting a label on the input

Summary

  • datalist suggests values for an input
  • Connect with list + matching id
  • Users may still type custom text
  • Use select when the choice must be fixed

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
4
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Html Tutorial