HTML - <datalist> Tag

Quiz

Introduction to <datalist> Tag

The HTML <datalist> tag is used to define a list of pre-defined options for the <input> element, enabling the user to select from a set of suggestions while still allowing custom input. It improves the user experience by providing the autocomplete functionality.

The <datalist> tag works in conjunction with the list attribute of the <input> element. Every suggestion within in a <datalist> is defined by using the <option> tag.

The <datalist> tag is supported in most of the modern browsers, but the fallback strategies should be considered for the older browsers.

Syntax

Following is the syntax of HTML <datalist> tag −.

<datalist>....</datalist>

Attributes

HTML datalist tag supports Global and Event attributes of HTML.

Example : Basic Usage

Let's look at the following example, where we are going to consider the basic usage of the <datalist> tag.

<!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>

Example : Using value Attribute

Consider the following example, where we are going to use the value attribute along with the <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">
        <!-- HTML datalist -->
        <datalist id="values">
          <option value="HTML">HTML</option>
          <option value="CSS">CSS</option>
          <option value="JavaScript">JavaScript</option>
      </datalist>
    </form>
</body>

</html>

Example : Using with Date and Time

In the following example, we are going to use the <datalist> tag with the date and time type.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML datalist tag</title>
</head>
<body>
   <!--create a datalist-->
   <p>Choose your Time</p>
   <input type="time" list="hours">
   <datalist id='hours'>
      <option value="08:00"></option>
      <option value="10:00"></option>
      <option value="12:00"></option>
   </datalist>
</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

Print Page