HTML - <datalist> Tag

HTML <datalist> tag is use to specifies a list of pre-defined options for the <input> element, it provides autocomplete features to an input element, when the user clicks on the input field they will show the dropdown list of pre-defined options. The id attribute of <datalist> tag is equal to the list attribute of an input field. HTML <datalist> element contains a set of <option> elements that represent acceptable or recommended options available to choose from among other controls.

Syntax

<datalist>....</datalist>

Attribute

HTML datalist tag supports Global and Event attributes of HTML.

Examples of HTML datalist Tag

Bellow examples will illustrate the usage of datalist tag, where, when and how to use it to create datalist.

Creatnig HTML Datalist

In the bellow example, we are going to use the datalist tag without input element. It will generate an output displaying nothing on the webpage. because we are using the datalist tag without any option element.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Datalist</title>
</head>

<body>
   <form>
      <strong>HTML datalist Tag</strong>
      <br>
      <input list="values">
      <!-- HTML datalist -->
      <datalist id="values">
      </datalist>
   </form>
</body>

</html>

Datalist with Value and Text

In this example we are going to use the datalist tag along with the input element like value and text with option element.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Datalist</title>
</head>

<body>
    <form>
        <strong>HTML datalist Tag</strong>
        <br>
        <input list="values" name="answer">
        <!-- HTML datalist -->
        <datalist id="values">
          <option value="HTML">HTML</option>
          <option value="CSS">CSS</option>
          <option value="JavaScript">JavaScript</option>
      </datalist>
    </form>
</body>

</html>

Datalist with Selected Value

In the following example, we will create a data list where the valu will be pre selected. The selected value will be not chnageable to make it chnageable use HTML <select> tag rather than the HTML <datalist> tag.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Datalist</title>
</head>

<body>
    <form>
        <strong>HTML datalist Tag</strong>
        <br>
        <input list="values" name="answer" value="HTML">
        <!-- HTML datalist -->
        <datalist id="values">
          <option value="HTML">HTML</option>
          <option value="CSS">CSS</option>
          <option value="JavaScript">JavaScript</option>
        </datalist>
    </form>
</body>

</html>

Supported Browsers

Tag
button	Yes 20.0	Yes 10.0	Yes 4.0	Yes 12.1	Yes 9.5

html_tags_reference.htm