Skip to content
Related Articles

Related Articles

Improve Article
How to set the focus on drop-down list automatically when the page loads in HTML5?
  • Last Updated : 17 Mar, 2021

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
My Personal Notes arrow_drop_up
Recommended Articles
Page :