Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jan 31, 2023
Contribute to Docs

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.


<input list="input_list" >

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

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.



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>
<title>Learning About Datalists</title>
<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>

All contributors

Looking to contribute?

Learn HTML on Codecademy