HTML Element: Reference and Examples

You might see <datalist> Element reference while reading someone else’s HTML, or need it while building a page of your own. Instead of memorizing a definition, look at a working example and see when the element makes sense.

The Idea in Plain English

Gives an input suggested values without restricting users to those values. A select is better when users must choose only from listed options.

For a reference page, pay attention to where the element is allowed, whether it needs a closing tag, and what other elements it can contain.

A Working Example

Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<label for="pet">Favorite pet</label>
<input id="pet" name="pet" list="pet-options">
<datalist id="pet-options">
    <option value="Dog">
    <option value="Cat">
    <option value="Rabbit">
</datalist>

What Each Part Does

The label tells visitors and assistive tools what a control is for.
The input creates a field; its type changes the editing controls and the name identifies submitted data.
Each option represents one available choice.
for connects a visible label to the control with the same ID.
id names an element for labels, fragments, CSS or JavaScript; IDs should be unique.
name identifies a field in submitted form data or a named metadata entry.

The browser offers suggestions while the user can still type another answer.

Try It Yourself

Try replacing the example content with your own while keeping the valid HTML structure.

Common Beginner Mistakes

Believing datalist automatically validates or restricts the value.
Changing several parts of the example at once, making it difficult to see which part caused a different result.
Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

Gives an input suggested values without restricting users to those values. A select is better when users must choose only from listed options.
The browser offers suggestions while the user can still type another answer.
Test the markup in a browser, and check accessibility and real-world behavior where relevant.