W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

datalist ... ⁄datalist

Share it

datalist intro datalist browser display datalist parents - children datalist syntax

HTML5 datalist element

The datalist element allows you mark up a predefined set of options (given by the option element), suggested to the user »video

This list of suggestions is then attached to the input control through list attribute whose value represents the value of the id attribute of the datalist element; example:

<input list="id_a">

<datalist id="id_a">
<option value="option_value1" label="option_label1">
<option value="option_value2" label="option_label2">

About datalist

Display & support datalist

Firefox iconChrome iconIE icon10Opera iconSafari icon

Parents, children datalist

Attributes datalist


Syntax datalist

1<datalist> ... </datalist> »video

Attributes and Values datalist (comma separated)

<datalistattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<datalist accesskey="h"> ... </datalist>
2.class=class name»html »img<datalist class="class_name"> ... </datalist>
3.contenteditable="",  , true, false »html<datalist contenteditable="true"> ... </datalist>
4.contextmenu=menu id value»html<datalist contextmenu="menu_id_value"> ... </datalist>
5.data-*= value -<datalist data-http-error="404"> ... </datalist>
6.dir=ltr, rtl, auto»html<datalist dir="ltr"> ... </datalist>
7.draggable= true,  , false»img<datalist draggable="false"> ... </datalist>
8.dropzone= copy, move, link, string:, file: -<datalist dropzone="copy"> ... </datalist>
9.hidden= "",  , hidden»html »img<datalist hidden="hidden"> ... </datalist>
10.id=id name»html »img<datalist id="unique_id_name"> ... </datalist>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<datalist lang="en"> ... </datalist>
17.spellcheck="",  , true, false»html<datalist spellcheck="true"> ... </datalist>
18.style=CSS property:value»html »img<datalist style="color:red"> ... </datalist>
19.tabindex= integer »img<datalist tabindex="3"> ... </datalist>
20.title=text»html »link»style »abbr»dfn
»img »meter
<datalist title="html page"> ... </datalist>
21.translate="", yes, no»html »img<datalist translate="yes"> ... </datalist>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration datalist element

HTML5 datalist element: mark up a suggestion list

min video details
00:00 video tutorial: datalist element
00:05 the datalist element marks up a predefined set of options which can be suggested to the user through an input control at user's input
00:11 let's add the set of options which represents potential suggestions
00:18 the values of the value attribute of these option elements will be suggested when the user will start input
00:24 the datalist element must be used in conjunction with input control, where the value of the id attribute of the datalist element = the value of the list attribute of the input element
00:45 test: as we input (type in) the time, GMT format, inside the input box, the values of the value attributes of the option elements are being suggested to us and we can choose from them

For more information about the datalist element, please see the specs: W3CWHATWG