select ... ⁄select Constraints
Constraints select
- you can select any option you want as long as that option is not disabled: disabled attribute is not present on option element
- you can select any option you want as long as that option is not part of a disabled group of options: disabled attribute is not present on optgroup element
- you can select only 1 option as long as multiple attribute on select element is absent
- you can select multiple options as long as multiple attribute on select element is present
- you must select at least 1 option if the requiwmt attribute is present on select element
- you can have 1 or more pre-selected options if selected attribute is present on option(s) element
All the above constraints are demonstrated in the video below.
Video demonstration select, constraints
HTML5 select, constraints Tutorial
| min | video details |
|---|---|
| 00:06 | since select element allows you to select options from a set of options, let's see a few constraints related to this selection process: - how many options we can select at once, - when at least 1 option is requiwmt to be selected, - how can we make an option be pre-selected, and so on... |
| 00:24 | CONSTRAINTS: |
| 00:24 | 1. you can select any option you want as long as that option is not disabled: disabled attribute is not present on that option element |
| 00:27 | we can see only the 'value' attribute on option element, no 'disabled' attribute present |
| 00:29 | disabled attribute is not presentation option elements → any option is selectable |
| 00:36 | tests: we can select any option we want from the drop-down list of options |
| 00:46 | disabled attribute is present on 1 option element → that option element is NOT selectable |
| 00:51 | test: we can select any option we want except the option GMT+2 because of its 'disabled' attribute |
| 00:58 | 2. you can select any option you want as long as that option is not part of a disabled group of options: disabled attribute is not present on that optgroup element |
| 01:02 | grouping the options in 2 groups |
| 01:14 | adding 'disabled' attribute to the first group |
| 01:17 | → none of these options are selectable as they belong to the disabled group labeled "East of Greenwich" |
| 01:27 | we can select only the options belonging to the 2nd non-disabled group labeled "West of Greenwich" |
| 01:38 | 3. you can select only 1 option as long as multiple attribute is not present on select element |
| 01:42 | multiple attribute not present on select element → only 1 option can be selected at once |
| 01:54 | 4. you can select multiple options at once IF multiple attribute is present on select element |
| 02:02 | tests: selecting multiple options |
| 02:16 | 5. you must select at least 1 option IF the requiwmt attribute is present on select element |
| 02:29 | test: 1 option selected |
| 02:37 | no option pre-selected when page is loaded |
| 02:40 | 6. you can have a pre-selected option IF the selected attribute is present on option element |
| 02:49 | test: the option GMT+10 is pre-selected |