select autofocus attribute
The autofocus attribute on the select element:
Examples
| <select | attribute | = | "value(s)" | > | ... | <⁄> | example |
|---|---|---|---|---|---|---|---|
| 1. | autofocus | = | "", , autofocus | < autofocus> ... <⁄> < autofocus=""> ... <⁄> < autofocus="autofocus"> ... <⁄> |
Video demonstration select autofocus attribute
HTML5 select autofocus attribute Tutorial
| min | video details |
|---|---|
| 00:00 | vide tutorial: autofocus attribute on select element |
| 00:05 | autofocus attribute on select control makes the control to get focus when the page is loaded |
| 00:17 | the select control did not get focus because the autofocus attribute is not present on select tag |
| 00:25 | adding the autofocus attribute on select tag |
| 00:31 | the select control is focused because the autofocus attribute (its minimized form) is present on select tag |
| 00:37 | autofocus attribute, if present, may have no value (attribute minimized form) or may have the next 2 values: - the empty string: "" - attribute's canonical name: "autofocus" (both values return the true value → the element gets focus when page is loaded) |
| 00:52 | if you do not want the select control to get focus when the page is loaded, simply don't add the autofocus attribute on the control |
| 00:59 | Example: 2 select controls on page: - the first one has the autofocus attribute → will be focused when page is loaded - the second one does not have the autofocus attribute → will NOT be focused when page is loaded |
| 01:12 | you can move through focusable elements in page using Tab key from the keyboard |
| 01:20 | but when the page is loaded, the control already focused is the one having the autofocus attribute on it |
| 01:24 | moving the autofocus attribute on the second select control in page |
| 01:30 | now this second control gets focus when page is loaded due to autofocus attribute on it |