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
.png)
.png)