Data List in HTML Forms
Autocomplete Input with Suggestions

Data List in HTML Forms: Suggestions Without Restrictions

Imagine giving users a helpful nudge — a list of suggestions they can pick from — while still letting them type their own answer. That’s exactly what <datalist> offers: a bridge between control and freedom.

What is a Datalist?

<datalist> is an HTML element that provides a set of pre-defined options to an <input>. As users type, matching suggestions appear, but they’re not locked into the list — they can type anything they want.

Basic Syntax

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

[ A ▼ ] — Suggestions: Apple, Banana, Cherry

When the user starts typing, options from the list appear as suggestions. It’s smart, flexible, and works beautifully for search bars, forms, and custom inputs.

Connecting <input> and <datalist>

The list attribute on the input field must match the id of the <datalist> element.

<input type="text" list="items" name="itemName">
<datalist id="items">
  <option value="Item 1">
  <option value="Item 2">
  <option value="Item 3">
</datalist>

This setup enables autocomplete-style interaction without enforcing the choices.

Customizing the Suggestion List

You can add as many <option> values as needed — even dynamically via JavaScript in advanced use cases (though that goes beyond HTML).

Placeholder + Datalist

Pair placeholder with datalist for a more guided UX.

<input type="text" name="fruitName" list="fruitList" placeholder="Choose or type a fruit">
<datalist id="fruitList">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

[ Choose or type a fruit ▼ ]

Real-World Example: Fruit Feedback with Suggestions

<form action="/submit-fruit" method="post">

  <label for="fruit">Your favorite fruit:</label><br>
  <input type="text" id="fruit" name="fruit" list="fruitOptions" placeholder="Apple, Banana, etc." required>
  
  <datalist id="fruitOptions">
    <option value="Apple">
    <option value="Banana">
    <option value="Cherry">
    <option value="Mango">
    <option value="Pineapple">
  </datalist><br><br>

  <input type="submit" value="Submit">
</form>

Your favorite fruit: [ type or pick ▼ ]  
[Submit]

This form gently suggests a few fruits but still respects the user’s freedom to enter something unique — like "Blueberry".

Browser Support

<datalist> is supported in all major browsers except Safari on iOS (which may ignore the suggestion dropdown but still allows typed values).

Best Practices

• Use when there’s a long list of common answers (e.g., cities, tags, categories)
• Don’t rely on datalist for strict validation — users can enter anything
• Combine with required if the field must be filled
• Use helpful placeholders to guide users on what to expect

Summary

The <datalist> element gives you the best of both worlds: suggested options and open input. You’ve now learned to:

• Create a datalist element and connect it to an input
• Offer relevant suggestions without limiting user input
• Enhance form usability and speed without JavaScript

What’s Next?

Up next: we explore the autofocus and autocomplete attributes — making your forms more intuitive from the moment the page loads.