datalist ... ⁄datalist
HTML5 datalist element
The datalist element allows you mark up a predefined set of options (given by the element), suggested to the user »video
This list of suggestions is then attached to the control through list attribute whose value represents the value of the id attribute of the element; example:
<input list="id_a">
<datalist id="id_a">
<option value="option_value1" label="option_label1">
<option value="option_value2" label="option_label2">
<⁄datalist>
About datalist
- is an optional element
Display & support datalist
- display in browser »video
- display: none
10
Parents, children datalist
- datalist nested within elements »datalist parents
- elements nested within datalist »datalist children
»examples
Attributes datalist
- required: none
- optional: global attributes, event attributes
Warning
- for option element, child of the datalist element: value , label represent required attributes
- for option element, child of the select element: value , label represent optional attributes
Syntax datalist
| 1 | <> ... </> »video |
Attributes and Values datalist (comma separated)
| < | attribute | = | "attribute_value(s)" | > | Video | Examples |
|---|---|---|---|---|---|---|
| 1. specific attributes | ||||||
| All Specific Attributes | ||||||
| 2. global attributes | ||||||
| 1. | accesskey | = | keyboard key | »img | < accesskey="h"> ... </> | |
| 2. | class | = | class name | »html »img | < class="class_name"> ... </> | |
| 3. | contenteditable | = | "", , true, false | »html | < contenteditable="true"> ... </> | |
| 4. | contextmenu | = | menu id value | »html | < contextmenu="menu_id_value"> ... </> | |
| 5. | data-* | = | value | - | < data-http-error="404"> ... </> | |
| 6. | dir | = | ltr, rtl, auto | »html | < dir="ltr"> ... </> | |
| 7. | draggable | = | true, , false | »img | < draggable="false"> ... </> | |
| 8. | dropzone | = | copy, move, link, string:, file: | - | < dropzone="copy"> ... </> | |
| 9. | hidden | = | "", , hidden | »html »img | < hidden="hidden"> ... </> | |
| 10. | id | = | id name | »html »img | < id="unique_id_name"> ... </> | |
| 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 | < lang="en"> ... </> | |
| 17. | spellcheck | = | "", , true, false | »html | < spellcheck="true"> ... </> | |
| 18. | style | = | CSS property:value | »html »img | < style="color:red"> ... </> | |
| 19. | tabindex | = | integer | »img | < tabindex="3"> ... </> | |
| 20. | title | = | text | »html »link»style »abbr»dfn »img »meter | < title="html page"> ... </> | |
| 21. | translate | = | "", yes, no | »html »img | < translate="yes"> ... </> | |
| 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 element, please see the specs: W3C ⁄ WHATWG