HTML5 <datalist> Tag

The HTML <datalist> element is used to contain a set of <option> elements that represent the values available for other controls.

The only content permitted inside this element is either phrasing content or zero or more <option> elements. Both the starting and ending tag are mandatory for this element. The parent of the <datalist> tag can be any element that accepts phrasing content.

The following style is applied to this element by default:

datalist {
  display: none;
}

Here is an example of using this tag:

<label>Choose a movie from this list:
<input list="movies" name="myMovie" /></label>
<datalist id="movies">
  <option value="The Shawshank Redemption">
  <option value="The Godfather">
  <option value="The Dark Knight">
  <option value="12 Angry Men">
  <option value="Schindler's List">
  <option value="Pulp Fiction">
</datalist>

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML datalist Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <datalist> element on MDN.
  2. You can also read the HTML <datalist> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top