Datalist HTML

HTML <datalist> Tag

To provide an autocomplete feature on a form element, with a list of predefined options for the users to select data, the HTML <datalist> tag is used. It was introduced in HTML5 to be used with an <input> element with a “list” attribute whose value is linked with the <datalist> id.

Example:

<!DOCTYPE html>
<html>
<body>
<h4>Select a Subject:</h4>
<form action="/action_page.php" method="get">
  <input list="subjects" name="subject">
  <datalist id="subjects">
    <option value="English">
    <option value="Hindi">
    <option value="French">
    <option value="Spanish">
    <option value="German">
  </datalist>
  <input type="submit">
</form>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are providing a list of predefined options for the users to select a subject to be filled in the form.

Global Attributes:

The Global attributes are supported by the HTML <datalist> tag.

Event Attributes:

The Event attributes are supported by the HTML <datalist> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please Share