HTML5: How to specify that the drop-down list should automatically get focus when the page loads?

Last update on February 12 2024 12:52:32 (UTC/GMT +8 hours)

Solution:

HTML Code:

>!DOCTYPE html>>!-- Define document type as HTML -->
>html>>!-- Begin HTML document -->
>head>>!-- Start of document header -->
>meta charset="utf-8">>!-- Define character encoding -->
>title>How to specify that the drop-down 
list should automatically get focus when the 
page loads>/title>>!-- Title of the HTML page -->
>/head>>!-- End of document header -->
>body>>!-- Start of document body -->
>form name="example" action="html-select-option-optgroup-example.html" >>!-- Start of form with name and action attributes -->
Select one or more sections: >!-- Prompt for user selection -->
>select name="languages" autofocus>>!-- Start of dropdown menu with name and autofocus attributes -->
>optgroup label="Server_side">>!-- Grouping of options with a label -->
>option>PHP>/option>>!-- First option under Server_side group -->
>option>ASP>/option>>!-- Second option under Server_side group -->
>option>Ruby on Rails >/option>>!-- Third option under Server_side group -->
>/optgroup>>!-- End of Server_side group -->
>optgroup label="Client_side">>!-- Another grouping of options with a label -->
>option>JavaScript>/option>>!-- First option under Client_side group -->
>option>VB Script >/option>>!-- Second option under Client_side group -->
>/optgroup>>!-- End of Client_side group -->
>/select>>!-- End of dropdown menu -->
>/form>>!-- End of form -->
>/body>>!-- End of document body -->
>/html>>!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a form containing a dropdown menu.
The form allows users to select one or more sections.
The dropdown menu has two groups: "Server_side" and "Client_side".
Each group contains multiple options.
The autofocus attribute is added to the >select> tag, indicating that the dropdown menu should automatically receive focus when the page loads. This means that the dropdown will be highlighted or active by default, allowing users to interact with it without having to click on it.
This enhances user experience by immediately directing attention to the dropdown, especially in cases where user input is expected upon page load.

Live Demo:

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page