Categories
Web development

HTML datalist tag

The HTML <datalist> tag defines a list of pre-defined options for an <input> element.

HTML datalist tag

The HTML <datalist> element provides “autocomplete” function for <input> elements. Users will see a drop-down list of pre-defined choices as they input data.

The HTML <datalist> tag’s id attribute must be the same as the <input> element’s list attribute (to link them together).

Example:

<!DOCTYPE html>
<html>
<body>

<form action="" method="get">
  <label for="webDev">Choose an option:</label>
  <input list="web-dev" name="web-dev" id="webDev">
  <datalist id="web-dev">
    <option value="HTML"></option>
    <option value="CSS"></option>
    <option value="JavaScript"></option>
    <option value="jQuery"></option>
    <option value="Java"></option>
  </datalist>
  <input type="submit">
</form>

</body>
</html>

Output:

Enjoy coding!