Introducing the HTML5 Datalist Element

Get a list of suggestions when you type with HTML5 Datalist element

Imagine you have a form and you want a user to input a string of text, like their name for example. You have the <input type="text" /> element, which will allow the user to type whatever he or she pleases. Imagine then that you want the user to enter his or her country of residence; you’d likely use a <select> element. This would limit the results to the options available (sometimes a good thing) and would also present the user with a potentially huge list to choose from. But what if you want the user to be free to enter what they please and at the same time being given some suggestions? This is where datalist comes in.


The datalist contains option elements much like the select element, though datalist itself is not an independent control. Instead it is added or attached to an <input type="text" /> element using the list attribute. Muhammad Ahmad Zafar has a regular <input type="text" /> control with an id and the new list attribute. This tells the browser to load the list of values or suggestions from the datalist element with a corresponding id. Then comes the actual datalist element with the aforementioned id and a collection of option elements. This is how the values are attached to the input control. When you run this in the browser, you will see a normal textbox, then when you start typing (or press the down arrow key, which works in Firefox and Chrome but not in Opera) the complete or filtered list appears.


Be the first to write a comment

You must me logged in to write a comment.