The HTML5 datalist element

html5 datalist

I speak for many a developer when are I say that until recently, web forms were one of the most mundane and uninspiring elements of a web page. As a matter of fact, I had disdain for creating and using web forms. But thanks to an array of HTML5 form attributes, input types and elements this is no longer the case. In this post I am going to focus on the datalist element.

The datalist element enables you as a developer to provide a predefined list of values to the user as well as allowing them to enter their own. The datalist element is used with an input element using the list attribute, to link it to the datalist. For example;
<input value=”” list=”fruits” />
<datalist id=”fruits”></datalist>

The list attribute above links the input field to the datalist via the datalist id, in this case id=”fruits”.

You can then nest options inside the datalist element. Let’s have a look at a handful of examples.

input[type=text]

For text input fields, the datalist element allows us to set a predefined list analogous to a drop down list. The user is however not limited to the predefined list items. Unlike the drop down list, the user can still enter items not on the list, as I illustrate in the demo below.


here is the code;

<input type="text"  list="editors" />
<datalist id="editors">
  <option value="Notepad++" />
  <option value="Sublime Text" />
  <option value="Dreamweaver" />
  <option value="Coda" />
  <option value="e-texteditor" />
  <option value="Vim" />
  <option value="UltraEdit" />
</datalist>

input[type=date]

Most modern browsers handle the date input field well. datalist takes it that one step further by allowing you to add suggested dates and specify labels.



<input type="date"  list="dates" />
<datalist id="dates">
  <option value="Christmas day">2013-12-25</option>
  <option value="Labour day">2013-05-01</option>
  <option value="Birthday">2013-11-26</option>
</datalist>

input[type=range]

If you are not familiar with range input type, it allows the user to pick a value from a given range. You can extend this with our new found friend datalist, by setting predefined markers of values for the user to pick from.

0


<input type="range" value="0" min="0" max="90" list="ranges" id="range" />
<output for="range" >0</output>
<datalist id="ranges">
  <option>0</option>
  <option>15</option>
  <option>30</option>
  <option>45</option>
  <option>60</option>
  <option>75</option>
</datalist>

input[type=color]

This is another HTML5 input field that allows the user to select a colour from a colour picker. The datalist element can be used to provide a predefined list of colours.



<input type="color" value="#000000" list="colours" />
<datalist id="colours">
  <option >#c0ffee</option>
  <option >#bada55</option>
  <option >#0ff1ce</option>
  <option >#b00b00</option>
  <option >#deface</option>
</datalist>

input[type=week]

Akin to the date input field, the week input type allows the user to pick weeks rather than days. With the help of datalist, we can again give the user a list of weeks to pick from.



<input type="week" list="weeks" />
<datalist id="weeks">
  <option label="14th Week of 2013" >2013-W14</option>
  <option label="15th Week of 2013" >2013-W15</option>
  <option label="25th Week of 2013" >2013-W25</option>
  <option label="52nd Week of 2013" >2013-W52</option>
  <option label="30th Week of 2013" >2013-W30</option>
</datalist>

Conclusion

I hope that gives you an insight in the datalist element. There are more input field types that can be linked to datalist element. I have only scratched the surface above to demonstrate its use.

Unfortunately, support for input types introduced in HTML5 is sparse, especially by Internet Explorer, where even IE10 has only implemented a handful of them. Since the datalist element is inextricably linked to input fields, you will find usage is currently limited. This however doesn’t mean you shouldn’t use these new funky elements as long as you have provisions (gracefully degrade) for unsupported browsers.

Useful resources