select ... ⁄select
HTML5 select element
The select element, a control which allows you to select one or multiple options from a predefined set of options. »video
About select
- is an optional element
- multiple select elements allowed per HTML5 document
Display & support select
- display in browser »video
- display type: inline





Parents, children select
- select nested within elements »select parents
- elements nested within select »select children
»examples
Attributes select
- required: none
- optional: specific attributes, global attributes, event attributes
Observation:
If required attribute present, multiple absent, and size attribute also absent or has the value="1", then a placeholder label option is required. »video
Constraints:
- Find out when you can select:
- any option
- only 1 option
- multiple options
- at least 1 option
- or have pre-selected option(s) »video
Example
- <autofocus name="options_group" required multiple size="6"> ... <⁄ >
Example interpreted and demonstrated on this »video
Syntax select
1 | <> ... </> »video |
Attributes and Values select (comma separated)
< | attribute | = | "attribute_value(s)" | > | Video | Examples |
---|---|---|---|---|---|---|
1. specific attributes | ||||||
1. | autofocus | = | "", , autofocus | »video | <autofocus> ... <⁄ > | |
2. | disabled | = | "", , disabled | »video | <disabled> ... <⁄ > | |
3. | form | = | form_id | - | <form="form_id"> ... <⁄ > | |
4. | multiple | = | "", , multiple | »video | <multiple> ... <⁄ > | |
5. | name | = | string (element_name) | - | <name="element_name"> ... <⁄ > | |
6. | required | = | "", , required | »video | <required> ... <⁄ > | |
7. | size | = | number | »video | <size="3"> ... <⁄ > | |
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 select element
HTML5 select element: mark up a drop-down list of options
min | video details |
---|---|
00:00 | video tutorial: select tag |
00:05 | select element represents a control which allows you to select one or multiple options from a given set of options |
00:14 | the select control displaying in browser but with no option inside it → nothing to select |
00:18 | adding the set of options inside select element, set from which we are able to select one option by default or multiple options IF the attribute 'multiple' is specified on select element |
00:22 | 1. the set of options in this case is composed by option elements, children of select element (2. the set of options, IF GROUPED, is composed by option element(s) children of optgroup element inside select element) |
00:27 | example1: selecting an option: GMT+1 |
00:31 | this option has been selected |
00:34 | example2: selecting another option: GMT+10 |
00:38 | another example |