🎓 A1Learner
🔍

HTML Datalist

A datalist element is a list of suggestions linked to a text field. A visitor can pick a suggestion or type a different answer.

Link an input to a datalist

The list attribute of the input holds the datalist id. That match links the two elements.

<label for="city">City</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
<option value="Paris"></option>
<option value="Rome"></option>
<option value="Lima"></option>
</datalist>

Suggestions while typing

Typing in the field opens the matching suggestions. The visitor clicks one to fill the field.

<label for="browser">Browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Safari"></option>
</datalist>

Typing a different answer

The field still accepts words that are not in the list. The list helps, but it never blocks typing.

<label for="pet">Pet</label>
<input list="pets" id="pet" name="pet">
<datalist id="pets">
<option value="Dog"></option>
<option value="Cat"></option>
</datalist>

Example

<!DOCTYPE html>
<html>
<head>
<title>Datalist</title>
</head>
<body>
<h1>Plan a Trip</h1>
<p>Pick a place or type your own.</p>
<form>
<label for="place">Destination</label>
<input list="places" id="place" name="place">
<datalist id="places">
<option value="Paris"></option>
<option value="Rome"></option>
<option value="Lima"></option>
</datalist>
<button type="submit">Save trip</button>
</form>
</body>
</html>

Key points

  • Datalist: a list of suggestions tied to a text field
  • List attribute: the input setting that holds the datalist id
  • Option element: one suggestion inside a datalist
  • A datalist suggests answers but never forces one.
  • Id: the unique name that the list attribute points to

In this example, the input carries list set to places. The datalist carries id set to places, so the two match. The datalist holds three option elements as suggestions. A visitor can pick Paris, Rome, or Lima from the list. A visitor can also type any other place, and a submit button ends the form.

Note

A select list allows only its own choices. A datalist allows any answer.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What can a visitor do with a datalist field?