Summary -

In this topic, we described about the <datalist> tag along with detailed example.

The <datalist> tag is new in HTML5. Used to specify the list of pre-defined options for <input> element. The <datalist> tag used to specifiy a list of pre-defined options for an <input> element.

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 -

<datalist>.... HTML text here </datalist>

Example -

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