HTML autofocus Global Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The autofocus attribute is a boolean global attribute that can be applied to certain HTML elements to indicate that the element should automatically receive focus when the page loads. Focus, in this context, means that the element becomes active and ready for user input, such as a text field being ready to type into or a button being ready to be clicked via keyboard.

Key Points:

Boolean Attribute: autofocus does not require a value. Simply including the attribute in an element is enough to enable the behavior:

<input type="text" autofocus>

Default Behavior: When a page loads, the browser will attempt to focus on the first element with the autofocus attribute. If multiple elements have autofocus, only the first one in the document order will be focused.

Supported Elements: While it is a global attribute, autofocus has meaningful behavior primarily on interactive form-related elements, including:

<input> (text, email, password, etc.)
<textarea>
<select>
<button>
<a> (if it has a tabindex attribute)

Focus Interaction: The autofocus attribute does not override user actions. If the user has already interacted with the page (for example, clicked elsewhere or switched tabs), the element may not automatically receive focus.

Accessibility Considerations: Automatically focusing an element can improve usability for forms by guiding users to the first input. However, overuse can be disruptive for keyboard or screen reader users, so it should be applied judiciously.

Example Usage:

<form>
  <label for="username">Username:</label>
  <input id="username" type="text" name="username" autofocus>
  
  <label for="password">Password:</label>
  <input id="password" type="password" name="password">
  
  <button type="submit">Login</button>
</form>

In this example, the cursor automatically appears in the "Username" input field when the page loads, ready for the user to type.

Syntax

<tagname autofocus>

Values

autofocusHTML allows writing autofocus autofocus="autofocus" or even autofocus="". These are all equivalent to just including the attribute.

Example

Due to the autofocus on the example, the page will scroll here on loading.

HTML

  <form>

    <!-- This input will automatically receive focus when the page loads -->

    <label for="username">Username:</label>

    <input id="username" type="text" name="username" autofocus>

    <br><br>



    <label for="password">Password:</label>

    <input id="password" type="password" name="password">



</form>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML autofocus global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.