HTML Select Autofocus Attribute

The autofocus attribute of the <select> element in HTML is used to set focus to a drop-down list when the page loads.

Following is the syntax −

<select autofocus>

Let us now see an example to implement the autofocus attribute of the <select> element −

Example

 Live Demo

<!DOCTYPE html>
<html>
<body>
<h1>Profile</h1>
<h2>Educational Qualification</h2>
<section>
<h3>Graduation</h3>
<select autofocus>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select>
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech">M.TECH</option>
   <option value="msc">M.Sc</option>
</select>
</section>
<section>
<p>Worked at ABC Corporation from July 2015 - May 2019 as a Technical Manager.</p>
</section>
</body>
</html>

Output

In the above example, we have two drop-down lists under different sections −

<section>
<h3>Graduation</h3>
<select autofocus>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select>
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech">M.TECH</option>
   <option value="msc">M.Sc</option>
</select>
</section>

On page loads, we are setting autofocus for one of the drop-down list using the autofocus attribute as shown below −

<select autofocus>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
Updated on: 2019-07-30T22:30:26+05:30

30 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements