**`<datalist>`** connects to an `<input>` via the input's **`list`** attribute matching the datalist's `id`. Unlike `<select>`, a `<datalist>`-linked input still lets the user type ANY value — the listed options are just suggestions shown in an autocomplete-style dropdown, not a restriction. This makes it ideal for cases like 'suggest common answers, but allow a custom one too' (e.g. suggesting popular cities in a text field that still accepts any city name).
1Understanding <datalist>
`<datalist>` connects to an <input> via the input's `list` attribute matching the datalist's id. Unlike <select>, a <datalist>-linked input still lets the user type ANY value — the listed options are just suggestions shown in an autocomplete-style dropdown, not a restriction. This makes it ideal for cases like 'suggest common answers, but allow a custom one too' (e.g. suggesting popular cities in a text field that still accepts any city name).
Unlike <select>, a <datalist> never restricts the input's actual value — always validate the submitted value server-side (or with the input's own pattern/type constraints) if it truly must be one of the suggested options.
<label for="browser">Favorite 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>2Practical Example
Here is a real-world application of <datalist> showing how it is used in production HTML.
<!-- Suggesting common quantities while still allowing any number -->
<input type="number" list="quantities" name="qty">
<datalist id="quantities">
<option value="1"></option>
<option value="5"></option>
<option value="10"></option>
</datalist>3Best Practices
Follow these guidelines when working with <datalist>:
1. Use <datalist> when you want to SUGGEST common values but still allow free-form input
2. Use <select> instead when the value truly must be restricted to a fixed set of choices
3. Give meaningful, unique values in each <option> — they populate the suggestion dropdown text
Tip: Unlike <select>, a <datalist> never restricts the input's actual value — always validate the submitted value server-side (or with the input's own pattern/type constraints) if it truly must be one of the suggested options.
<label for="browser">Favorite 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>