<input list="">

Attribute of

How To Use Input To Create Form Fields In HTML: Easy Tutorial

What does <input list=""> do?

Specifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field.

Code Example

<form>
 <label for="color">Favorite color?</label><br>
 <input name="color" id="color" list="colors">
</form>

<datalist id="colors">
 <option>Red</option>
 <option>Yellow</option> 
 <option>Blue</option> 
 <option>Green</option> 
 <option>Orange</option> 
 <option>Purple</option> 
 <option>Black</option> 
 <option>White</option> 
 <option>Gray</option> 
</datalist>

Using the list attribute

The list attribute identifies a separate <datalist> element (by id), which provides a set of pre-defined “auto-complete” options.

list vs. <select> vs. autocomplete

It can be easy to mix up these different styles of user input, as they each do something similar. However, nce you understand the differences, it will be easy to select the appropriate one for any situation. The <select> element provides several <options> which the user must select between. The user may not enter anything that is not provided for in the list of options. The difference here between using a <select> element and an <input> element with a <datalist> is that with a <datalist>, the user is free to reject any of the options in the list and enter a free string. The options in the list are simply suggestions. The autocomplete attribute allows the browser to provide autocomplete suggestions based on the user’s inputs to other forms on other websites — for example, the user’s own name, email address, or contact information. In contrast to that, the <datalist> lets the website itself suggest options. This can be useful for things like tags and search terms. In both cases (autocomplete or <datalist>), the user is free to reject the suggestions and enter whatever they like into the input field.

Buggy implementation

The list and <datalist> input combination are powerful UX tools for form usability. Unfortunately, the implementation in various browsers is a bit buggy. As of this writing:

• Support in both Internet Explorer and Edge is “extremely buggy”.
• Chrome and Opera both display unscrollable suggestion lists, which makes very long lists unusable.
• Firefox mostly works, but does not support use of <datalist> on non-text inputs.
• Support in both the desktop and iOS versions of Safari is simply non-existent.

Support for list and <datalist> is well implemented in both the native Android browser and the Chrome browser app for Android.

Alternative Implementations via JavaScript

If you really need autocomplete suggestions, you probably should not rely on a pure HTML5 solution at this point. Thankfully, the same effect can be created in JavaScript.

• If you are using jQuery (you probably are), you can try jQuery Autocomplete.
• If you need a particularly lightweight solution, try Awesomeplete (only 2kb!).
• If you need a really robust and flexible solution with a lot of options to control, try Twitter’s Typeahead.
• For HTML5 mobile apps (built in something like PhoneGap), you may want a fully integrated forms solution. In that case, you should look at jQuery UI, which includes an autocomplete feature.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for list

10 (Buggy)	43 (Problems)	45 (Problems)	13 (Buggy)	Not supported.	35 (Problems)