Introduction
Prior to HTML5, web developers had to use a lot of workarounds to provide users with a list of choices for an input element. The folks behind HTML5 realized this and ensure that first class support to input choice list was made part of the specification with the datalist element.
Simply put, the datalist markup element is used when user needs to be presented with a list of prefined options to enter into an input element. Datalist element isn’t rendered on the UI.
Syntax
Datalist markup element is specified with by providing an “id” for the list and a set of option values.
<datalist id=testlist>
<option value=”TestValue1″>
<option value=”TestValue2″>
</datalist>
We can see that the id for the datalist is “testlist” and it has 2 option values.
To use a datalist, on any input element, specify the list attribute and give it the id of the datalist from which to source values.
<input type=”text” id=”enterValue” list=”testlist”/>
Now when user interacts with enterValue element and starts typing, the web page will autosuggest completion if the inputted characters match any option values.
If no input is entered, and the user presses the down key, the input element will show a dropdown with all the possible values.
This helps the user enter the right values.
Sample listing
Let us look at an example of datalist.
<!DOCTYPE html>
<html>
<meta charset=”utf-8″>
<title>Datalist sample</title>
<body>
<label>
<input type=”text” id=”elementarygrade” list=”elementarygrades”/>
<datalist id=elementarygrades>
<option value=”K Kindergarten”>
<option value=”1 First”>
<option value=”2 Second”>
<option value=”3 Third”>
<option value=”4 Fourth”>
<option value=”5 Fifth”>
</datalist>
</label>
<button id=”buttonGo” type=”button”>Go</button>
<article>
<header>
<h1>Datalist sample</h1>
<p>Demo showing datalist in HTML5</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
</article>
</body>
</html>
When the above HTML is rendered in a browser which understands datalist (not all browsers are HTML5 compliant), you can see the datalist in action.
Summary
In this article, we learned about how datalist markup element can be used to provide a list of options for an input element. I hope you have found this information useful.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
