HTML Datalist Tag

The <datalist> element was introduced in HTML 5.

The <datalist> tag is used to define a list of predefined options for an <input> element. It doesn't create a dropdown by itself, but when linked to an <input>, it shows suggested values that the user can choose from.

The <datalist> tag has "autocomplete" feature. Users can able to see the drop-drown when user tries to input the data. The <input> tag list attribute is the key to bind with <datalist> tag.

Syntax -

<input list="myOptions">
<datalist id="myOptions">
  <option value="Option 1">
  <option value="Option 2">
  <option value="Option 3">
</datalist>

The <input> uses the list attribute to point to the <datalist> by its id. The <datalist> contains one or more <option> elements. Users will see the list of suggestions as they type in the input box.

Example -

Scenario - Favorite Browser Selection

<!DOCTYPE html>
<html>
	<head>
		<title> datalist element example.. </title>
	</head>
	<body>
		<form action="search-results.htm" method="get">
			<input list="language" name="language">
			<datalist id="language">
				<option value="Cobol">
				<option value="Jcl">
				<option value="Java">
				<option value="Html">
			</datalist>
			<input type="submit">
		</form>
	</body>
</html>

Output -

Explaining Example -

The input box allows users to type freely. As they type, a dropdown list appears with the 5 browsers. If they want to type "Brave" or "Tor", they still can — it's not locked!