HTML5 Datalist Element

Description

HTML5 introduced the new <datalist> tag, which specifies a list of predefined <input> element options. It is used to provide the autocomplete feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. This element has no other attributes than the global attributes, common to all elements. The id of the datalist element must match with the list attribute of the input box.Keep in mind that Safari doesn’t support datalist yet. If you are using this element with an unsupported (older) browser version, the most browsers will simply ignores the datalist tag and render rest of the webpage. Internet Explorer 9 and below is a little bit special, it will simply print the option values to the page (a possible workaround can be found at http://viralpatel.net/).

Usage

Here you can see a Basic example on how to use the datalist tag in HTML5.

Live Sample

Keep in mind that this Live-Example only works on supported Browsers.

JSFiddle’s

• Simpel Example

 

If you have any questions or suggestions feel free to rate this snippet, post a comment or Contact Us via Email.

Related links:

• W3Schools.com
• caniuse.com datalist
• Viralpatel.net – HTML5 DataList Example
• A Look into: HTML5 Datalist
• QuackIt – HTML 5 datalist Tag
• JavaBeat – HTML5 – Datalist Vs Select Tags

Compatibility:
Chrome
Internet Explorer
Firefox
Opera
Safari