HTML datalist: offer suggestions without closing the input

Use it for a real task

An operations form suggests common receipt categories, yet some legitimate entries are new. The input's list attribute points to the datalist id. Each option is a suggestion, not a validated enumeration, and the server stores only categories that meet the application's rules. If the values must be restricted, a select element is a better contract than an open text field.

<form action="/receipts/category" method="post">
  <label for="category-name">Receipt category</label>
  <input id="category-name" name="category" list="category-options" required>
  <datalist id="category-options">
    <option value="Travel">
    <option value="Equipment">
    <option value="Facilities">
  </datalist>
  <button type="submit">Save category</button>
</form>

What the markup guarantees

The datalist id is a relationship target, not a field name. Browser presentation can differ; the plain input remains useful when suggestions are not shown. The endpoint and permitted category policy are application responsibilities.

Cost and limits

A short local list costs little. Hundreds of options make the document heavy and are hard to scan; search-backed suggestions then need a real service and an accessible interaction design.

Common Mistakes

• Do not treat a datalist suggestion as an enforced option.
• Do not confuse the datalist id with the submitted input name.
• Use select when the choice really is closed.

Connected lessons

• HTML select and textarea: preserve meaningful values and editable text
• HTML form names and disabled controls: know which values submit
• HTML constraint validation: improve feedback without trusting the browser