HTML <datalist> Tag

The <datalist> tag is used to set pre-defined options for <input> tag. Whenever a user places mouse cursor in the <input>, then all these pre-defined options should be visible.

Let us now see an example to implement the <datalist> tag in HTML −

Example

<!DOCTYPE html>
<html>
<body>
<p>Favorite Subject</p>
<form action="" method="get">
   <input list="subject" name="subject">
   <datalist id="subject">
      <option value="Programming">
      <option value="Networking">
      <option value="Database">
      <option value="Big Data">
      <option value="Cloud">
      <option value="Framework">
   </datalist>
   <input type="submit">
</form>
</body>
</html>

Output

HTML <datalist> Tag

Now, keep the mouse cursor inside the input box. The following pre-defined options would be visible now −

HTML <datalist> Tag

In the above example, we have set the pre-defined options for <input> −

<datalist id="subject">
   <option value="Programming">
   <option value="Networking">
   <option value="Database">
   <option value="Big Data">
   <option value="Cloud">
   <option value="Framework">
</datalist>

Now, on placing the cursor inside the above <input>, the following options would be visible, which we have pre-defined using the <datalist> element −

Programming
Networking
Database
Big Data
Cloud
Framework