Syntax
<input list="options" name="choice">
<datalist id="options">
<option value="Option A">
<option value="Option B">
</datalist>Examples
Basic Autocomplete
Suggesting common browser names while allowing free text.
<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>Number Suggestions
Using datalist to suggest common numeric values.
<label for="rating">Rating:</label>
<input type="range" list="ratings" id="rating" min="0" max="10">
<datalist id="ratings">
<option value="0"></option>
<option value="5"></option>
<option value="10"></option>
</datalist>City Search Suggestions
Suggesting cities while allowing any typed value.
<input list="cities" name="city" placeholder="Search for a city">
<datalist id="cities">
<option value="Manchester">
<option value="London">
<option value="Leeds">
</datalist>Attributes
- id (string): Referenced by the input's list attribute
Best practices
- Use datalist when you want to suggest common values without forcing the user to pick only from a fixed list — use select for that instead
- Connect it to an input using matching list and id attributes
- Keep the suggestion list reasonably short and relevant so it stays genuinely useful
- Test the visual behavior across browsers, since datalist styling and interaction is less consistent than other form controls
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<button>
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.