Advertisement
HTML/CSS

Introducing the HTML5 Datalist Element

by

HTML5 introduced a number of new elements, amongst which some interesting form controls. One such useful, yet little known control is the datalist element. Let's see what it can do for us.

Imagine we have a form and we want a user to input a string of text, like their name for example. We have the <input type="text" /> element, which will allow the user to type whatever he or she pleases. Imagine then that we want the user to enter his or her country of residence; we'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 we want the user to be free to enter what they please whilst at the same being given some suggestions? This is where datalist comes in.


How do I Use it?

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. Consider the following markup:

	<label>Select your preferred code editor:</label>
	<input type="text" id="txt_ide" list="ide" />
	<datalist id="ide">
		<option value="Brackets" />
		<option value="Coda" />
		<option value="Dreamweaver" />
		<option value="Espresso" />
		<option value="jEdit" />
		<option value="Komodo Edit" />
		<option value="Notepad++" />
		<option value="Sublime Text 2" />
		<option value="Taco HTML Edit" />
		<option value="Textmate" />
		<option value="Text Pad" />
		<option value="TextWrangler" />
		<option value="Visual Studio" />
		<option value="VIM" />
		<option value="XCode" />
	</datalist>

We have 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 we run this in the browser, we will see a normal textbox, then when we starting typing (or press the down arrow key, which works in Firefox and Chrome but not in Opera) the complete or filtered list appears. As we type, only the relevant options will be shown, much like how Google's Search box displays suggestions. Be aware though, slight behavioral variations do exist from browser to browser.

According to the official W3C website, the datalist can be used with:

  • <input type="text" />
  • <input type="url" />
  • <input type="tel" />
  • <input type="color" />
  • Data & Time (including Month etc.), Range and more.

More Attributes

We can take the options one step further by addind a label attribute, as in some of the items below:

	<label>Select your preferred code editor:</label>
	<input type="text" id="txt_ide" list="ide" />
	<datalist id="ide">
		<option value="Brackets" label="by Adobe" />
		<option value="Coda" label="by Panic" />
		<option value="Dreamweaver" />
		<option value="Espresso" />
		<option value="jEdit" />
		<option value="Komodo Edit" />
		<option value="Notepad++" />
		<option value="Sublime Text 2" label="the developer's choice" />
		<option value="Taco HTML Edit" />
		<option value="Textmate" />
		<option value="Text Pad" />
		<option value="TextWrangler" />
		<option value="Visual Studio" />
		<option value="VIM" />
		<option value="XCode" />
	</datalist>

Precisely how these labels are displayed and handled depends on the browser - take a look at the quirks section lower down to see how.


Can it be Used Right Now?

The browser support for datalist remained narrow until recently. Now IE 10+, Firefox 4+, Chrome and Opera support it (no Safari as yet). It is also supported by Opera Mobile and Firefox for Android. Take a look at this screenshot showing the current status as listed by caniuse.com:

Older browsers will automatically ignore the datalist element.

The overall support mentioned is 48.36% percentage. Arguably not that good, but the positive news is that older browsers will automatically ignore the datalist element, giving us a gracefully degrading experience. This is in fact true for all the new HTML5 form elements. If support for older browsers is required, the jQuery Autocomplete can be used as a fallback.


Quirks

Since wider browser support is only recent, there are predictable interpretations by the vendors. Firefox and Chrome use the OS theme for styling of the list options, whilst Opera will inherit certain styles (color, font-family) from the input field. Other than that, forget styling the datalist element with CSS.

Behavior also varies as to how the values are filtered. Each browser handles the list differently when the label and value attributes of the option element are used.

For example, Opera will filter on the basis of both value and label. "by A" and "Brac" will both return "Brackets" in our case.

Chrome, however, will ignore the label. "by A" won't return any results, for example, whereas "Brac" will.

Firefox displays only the label if it's defined. "by A" will return "by Adobe", but "Brackets" no longer exists at all!


Conclusion

There's plenty of room for improvement where implementation is concerned, but overall this is a welcome addition to the world of web. I hope this has whetted your appetite!


Further Resources

Related Posts
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    JavaScript & AJAX
    Creating Brackets ExtensionsDeeper in brackets retina preview
    A little while ago I wrote about the recent updates to the Brackets editor. Brackets is an open source project focused on web standards and built with web technologies. It has a narrow focus and therefore may not have a particular feature you've come to depend upon. Luckily, Brackets ships with a powerful extension API that lets you add any number of new features. In this article, I'm going to discuss this API and demonstrate how you can build your own extensions.Read More…
  • Code
    HTML & CSS
    Intro to Shadow DOMShadow dom retina preview
    Take any modern web page and you will notice that it invariably contains content stitched together from a variety of different sources; it may include the social sharing widgets from Twitter or Facebook or a Youtube video playing widget, it may serve a personalized advertisement from some ad-server or it may include some utility scripts or styles from a third party library hosted over CDN and so on. And if everything is HTML based (as is preferred these days) there is a high probability of collisions between the markup, scripts or styles served from various sources. Generally, namespaces are employed to prevent these collisions which solve the problem to some extent, but they don't offer Encapsulation.Read More…
  • Web Design
    UX
    Implementing the Float Label Form PatternForm float input retina
    Using Matt Smith’s mobile form interaction design as a guide, we will create a stunning form interaction for the web that’s both beautiful and accessible using HTML, CSS and JavaScript.Read More…
  • Code
    PhoneGap
    PhoneGap: Build a Feed Reader - Project StructurePhonegap feed reader@2x
    Although not specifically created to work together, jQuery Mobile and Cordova (also known as PhoneGap) are a very powerful duo to create hybrid, mobile apps. This series will teach you how to develop a feed reader using web technologies and these two frameworks. Over the course of this series, you'll also become familiar with the Cordova Connection and Storage Core Plugins and the Google Feed API.Read More…
  • Code
    HTML & CSS
    Mobile First With Bootstrap 3Bootstrap 3 preview
    Ok so a couple of weeks now, on it's very own two year anniversary Mark Otto and the rest of the guys responsible for the develop and maintenance of Bootstrap announced the official release of the framework's third version, and it came on steroids, let's see what we're getting.Read More…