Open In App
Related Articles

HTML autofocus Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The autofocus attribute in HTML is used to specify that the element should get focused when the page loads. It is a boolean attribute.

Syntax:

<elementName autofocus>

Note: It supports only the following elements: <button>, <input>, <select> and <textarea>.

Supported Tags: 

Example 1: In this example, we are using a select autofocus attribute which creates the dropdown for GeeksforGeeks courses.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <h2>GeeksforGeeks</h2>
 
    <p>
        The select element is used to create a drop-down list.
    </p>
 
    <form>
        <label for="courses">Select a course:</label>
        <select name="DSA Self Paced GfG" id="DSA">
            <option value="Full Stack Web Technology">
                Web Tech
            </option>
            <option value="Amazon Interview Preparation">
                Amazon
            </option>
            <option value="Complete Interview Preparation">
                CIP
            </option>
            <option value="Google Test Series">
                GTS
            </option>
        </select>
        <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
 
</html>

                    

Output:

autofocus attribute

Example 2: This example uses the autofocus attribute to create the focus on the first name while loading the page for the first time.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML autofocus Attribute</title>
</head>
 
<body style="text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>HTML autofocus Attribute</h2>
    <form>
        <label>First Name:
            <input type="text" autofocus
                   placeholder="Enter Name">
        </label>
    </form>
</body>
 
</html>

                    

Output:

autofocus

autofocus attribute

Example 3: This example uses the autofocus attribute with the <textarea> tag.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML autofocus Attribute</title>
</head>
 
<body style="text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>HTML autofocus Attribute</h2>
    <textarea rows="3" cols="30" autofocus>
        A computer science portal for geeks.
    </textarea>
</body>
 
</html>

                    

Output:

autofocus

autofocus attribute

Supported Browsers:

  • Google Chrome 5.0
  • Internet Explorer 10.0
  • Firefox 4.0
  • Opera 9.6
  • Safari 5.0


Last Updated : 04 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads