MP Web Studio
HTMLFoundation track
77 / 120

LESSON 77 OF 120

Build: suggestions with datalist

Connect an input to a datalist of suggestions.

Official sourceWHATWG HTML — datalistReviewed: 2026-08-26
STEP 1 · LEARN

How it works

Connect an input to a datalist of suggestions. Semantic structure should describe meaning, not visual appearance.

Correct example
<form><label for="city">Locality</label><input id="city" name="city" list="cities"><datalist id="cities"><option value="Chisinau"><option value="Balti"><option value="Cahul"></datalist></form>

A datalist holds predefined suggestions, but the user may still type another value. The input list attribute must match the list id, and real suggestions have non-empty values.

Common mistake
<form><input list="cities"><datalist><option value="Chisinau"></datalist></form>

The input has no label, id or name, the datalist has no “cities” id, and one option does not form the required suggestion set.

STEP 2 · APPLY

Your exercise

Complete the example. Connect an input to a datalist of suggestions.

STEP 3 · BUILD

Write and see the result

index.htmlHTML
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The input has an id, name and points to the cities datalist.
  • The datalist offers at least three distinct suggestions.
  • The input with suggestions has a label.
Explain the solution logic

Add a label, id and name to the input, set id="cities" on the datalist and provide at least three options with different values.