The
<datalist>tag is used to provide a list of predefined options for an<input>element.
It allows users to type a value or select from a list, offering a flexible and user-friendly input experience.
The<datalist>element must be linked to an<input>using thelistattribute.
Syntax
<input list="listId" name="inputName" id="inputId">
<datalist id="listId">
<option value="Option 1">
<option value="Option 2">
</datalist>Attributes
| Attribute | Description |
|---|---|
| id | Unique identifier for the datalist, used by the list attribute of <input>. |
| name | Rarely used, specifies the name of the datalist. |
Example
<!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>
<h2>Choose Your Favorite Browser</h2>
<form action="/samples/form_processor.php" method="post">
<label for="browser">Browser:</label>
<input list="browsers" id="browser" name="browser" placeholder="Start typing..." required>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
<option value="Opera">
<option value="Internet Explorer">
</datalist><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output
Browser Output
You will see a text input where users can either type or select a value from a suggested dropdown list.
As the user types, matching options appear for selection.
Try it in our TryIt Editor to see how <datalist> enhances form input.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All major browser supports <datalist> tag
Notes
- The
<datalist>provides autocomplete suggestions but does not restrict input to only the listed options. - Must be linked to an
<input>element via thelistattribute. - Improves user experience for forms with common or repetitive inputs.
- Works best for short lists; for very long lists, consider
<select>instead.
Conclusion
The <datalist> tag creates a dynamic, user-friendly input experience.
It is widely supported and enhances form usability by providing autocomplete suggestions.
