HtmlHow-ToBeginner · 3 min read

How to Create Datalist in HTML: Syntax and Example

To create a datalist in HTML, use the <datalist> element with multiple <option> elements inside it. Then link it to an <input> element using the list attribute to provide users with selectable suggestions while typing.

📐

Syntax

The <datalist> element contains a set of <option> elements that define the suggested values. The list attribute on an <input> element connects it to the datalist by referencing its id.

<input list="id">: Input field linked to datalist.
<datalist id="id">: Container for options.
<option value="...">: Each suggested value.

html

<input list="fruits" name="fruit-choice" id="fruit-choice">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
  <option value="Date">
  <option value="Grape">
</datalist>

Output

An input box that shows a dropdown list of fruits (Apple, Banana, Cherry, Date, Grape) as suggestions when typing.

💻

Example

This example shows an input field where users can type or select a fruit from the dropdown suggestions provided by the datalist.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Datalist Example</title>
</head>
<body>
  <label for="fruit">Choose a fruit: </label>
  <input list="fruits" id="fruit" name="fruit" placeholder="Start typing...">
  <datalist id="fruits">
    <option value="Apple">
    <option value="Banana">
    <option value="Cherry">
    <option value="Date">
    <option value="Grape">
  </datalist>
</body>
</html>

Output

A webpage with a labeled input box that shows a dropdown list of fruit suggestions as you type.

⚠️

Common Pitfalls

Common mistakes include:

Not matching the list attribute value on the input with the id of the datalist.
Using <option> elements without the value attribute, which will not show suggestions properly.
Expecting the datalist to restrict input only to the options; it only suggests values but allows any input.

html

<!-- Wrong: list attribute does not match datalist id -->
<input list="fruits-list" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
</datalist>

<!-- Correct: matching list and id -->
<input list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
</datalist>

📊

Quick Reference

Datalist HTML Cheat Sheet:

Element/Attribute	Purpose
`<input list="id">`	Links input to datalist by id
`<datalist id="id">`	Container for option suggestions
`<option value="...">`	Defines each suggestion value

Element/Attribute	Purpose
	Links input to datalist by id
	Container for option suggestions
	Defines each suggestion value

✅

Key Takeaways

Use the element with

Connect the datalist to an input using the input's list attribute matching the datalist's id.

Datalist suggests values but does not restrict input to those values.

Always include the value attribute in option elements for suggestions to work.

Ensure the list attribute and datalist id exactly match to enable suggestions.