Open In App

HTML autofocus Attribute

Last Updated : 24 Feb, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The HTML autofocus attribute is a powerful tool that enhances user experience by automatically setting the focus to a specific element when a webpage loads.

Syntax

<input type="text" autofocus> 

Note: This attribute is boolean, meaning it can either be present or absent.

Supported Tags

ElementPurpose
ButtonAutomatically focuses the button when the page loads.
InputAutomatically focuses the input field when the page loads.
SelectAutomatically focuses the select dropdown when the page loads.
TextareaAutomatically focuses the text area when the page loads.

Tip: It is important to note that only one element per document can effectively have the autofocus attribute. If multiple elements include autofocus, the first one in the DOM (Document Object Model) will receive focus

HTML autofocus Attribute Examples

Example 1: Focusing on the First Name “Input text Field” on Page Load

HTML
<!DOCTYPE html>
<html>

<head>
    <title>HTML autofocus Attribute</title>
</head>

<body>
    <h2>HTML autofocus Attribute</h2>
    <form>
        <label>First Name:
            <input type="text" 
                   autofocus placeholder="Enter Name" />
        </label>
    </form>
</body>

</html>

Output:

autofocusAttributes2

Example 2: Autofocus on a Textarea Field

HTML
<!DOCTYPE html>
<html>

<head>
    <title>HTML autofocus Attribute</title>
</head>

<body>
    <h2>HTML autofocus Attribute</h2>
    <textarea rows="3" cols="30" autofocus>
        A computer science portal for geeks.
    </textarea>
</body>

</html>

Output:

autofocusAttributes3

HTML autofocus Attribute example output

Supported Browsers


Next Article

Similar Reads