Open In App

How to set the focus on drop-down list automatically when the page loads in HTML5?

Improve
Improve
Like Article
Like
Save
Share
Report

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

Last Updated : 17 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads