How to set the focus on drop-down list automatically when the page loads in HTML5?
The purpose of this article is to focus the drop-down list automatically when the page loads in HTML5.
The <select> autofocus attribute is a boolean attribute that specifies that the drop-down list should automatically get focus when the page loads.
Syntax:
<select autofocus>
Example: The following code demonstrates a drop-down list with autofocus.
HTML
<!DOCTYPE html> < html > < head > < title >Autofocus Attribute</ title > </ head > < body > < h2 >The select autofocus attribute</ h2 > < p > The autofocus attribute specifies that the drop-down list< br > should automatically get focus when the page loads: </ p > < form action = "/action_page.php" > < label for = "mobiles" >Choose a Mobile:</ label > < select name = "mobiles" id = "mobiles" autofocus> < option value = "samsung" >Samsung</ option > < option value = "apple" >Apple</ option > < option value = "nokia" >Nokia</ option > < option value = "mi" >MI</ option > </ select > < br >< br > < input type = "submit" value = "Submit" > </ form > </ body > </ html > |
Note: The autofocus attribute of the select tag is not supported in firefox.
Output:
Browsers supported:
- Chrome
- Edge
- Safari
- Opera