option selected attribute
The selected attribute on the option element:
- pre-selects the option, it means that the option is already selected once the page has loaded
- selected is a specific attribute → can be applied ONLY on the next HTML5 element: option
- is an optional attribute
Warning: in order to have multiple pre-selected options, multiple attribute on select parent element is required.
Examples
| <option | attribute | = | "value(s)" | > | ... | <⁄option> | example |
|---|---|---|---|---|---|---|---|
| 3. | selected | = | "", , selected | < selected> ... <⁄> < selected=""> ... <⁄> < selected="selected"> ... <⁄> |
Video demonstration option selected attribute
HTML5 option selected attribute Tutorial
| min | video details |
|---|---|
| 00:00 | video tutorial: selected attribute on option element |
| 00:05 | selected attribute on option element pre-selects the option (is an optional attribute) |
| 00:15 | let's make the 3rd option pre-selected, by adding the selected attribute on it |
| 00:15 | Attribute values: - no value: attribute's minimized form: <option selected> - value empty string: <option selected=""> - value = attribute's canonical name: <option selected="selected"> |
| 00:27 | option C has been pre-selected |
| 00:32 | in order to have more than 1 option pre-selected, multiple attribute on select element is required |
| 00:41 | test result ok: multiple attribute on select element is missing → multiple options can't be pre-selected despite the selected attribute added on 2 options |
| 00:44 | adding the multiple attribute on select element (multiple attribute allows multiple options to be (pre)-selected at once) |
| 00:51 | test result ok: multiple attribute on select element is present → multiple options can be pre-selected and have been pre-selected: option A and option C |
| 00:56 | the text color of a selected ⁄ preselected option(s) is white on a blue background |