Form Element: Datalist

The <datalist> element specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of pre-defined options as they input data. The list attribute of the <input> element, must refer to the datalist id attribute. Here's an example of an input element with pre-defined values in a datalist element:

HTML file: Displayed by browser:
<form action="http://www.w3schools.com/html/action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

With the datalist tag, if your option is not listed, you can type it in the text box.

Back button Table of Contents Next button