<datalist>

Anonymous contributor

Published Jan 31, 2023

The <datalist> element displays pre-defined values to a user while typing into an input box. The user may enter any value and the <datalist> element will provide autosuggestions.

Syntax

<input list="input_list" >

<datalist id="input_list">
  <option value="option1" >
  <option value="option2" >
  <option value="option3" >
</datalist>

A <datalist> element may have one or more <option> elements that each represent a suggestion that appears in a drop-down list when a user enters input.

Example

The following example demonstrates a <datalist> that autosuggests different school subjects. Its id is matched with the <input> element’s list attribute, thus linking the two:

<!DOCTYPE html>
<html>
  <head>
    <title>Learning About Datalists</title>
  </head>
  <body>
    <input list="school-subjects" name="subject-choice" id="subject-choice" />
    <datalist id="school-subjects">
      <option value="English"></option>
      <option value="Math"></option>
      <option value="History"></option>
      <option value="Physics"></option>
      <option value="Biology"></option>
      <option value="Economics"></option>
    </datalist>
  </body>
</html>