HTML autofocus Attribute

Introduction

The autofocus attribute is a useful feature in HTML that allows developers to specify whether an input field should automatically gain focus when a web page loads. This attribute can enhance user experience by directing the user’s attention to a specific input element upon page load.

What You’ll Learn

Purpose of autofocus

The primary purpose of the autofocus attribute is to designate the default focus of the page, reducing the need for users to manually select an input field. This is particularly beneficial for forms or pages where a specific input requires immediate attention—such as a login username field or a site search box.

📝 Syntax

Add the boolean autofocus attribute to a focusable form control:

<input type="text" autofocus>

Syntax Rules

• Boolean attribute—presence means true; omit it for no auto-focus.
• Valid on input, select, textarea, and button.
• Focus is applied when the page finishes loading.
• Use on at most one element per page for predictable behavior.

💎 Values

The autofocus attribute has a boolean value:

• autofocus (present) — When this attribute is present on an input element, it indicates that the element should automatically gain focus when the page loads. If multiple elements have the autofocus attribute, the browser typically focuses on the first one encountered in the HTML document.

<!-- Boolean: presence enables focus -->
<input type="search" autofocus>

<!-- Equivalent in HTML -->
<input type="search" autofocus="">

Applicable Elements

Examples Gallery

Login form with autofocus and dynamic JavaScript focus.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" autofocus>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password">

  <input type="submit" value="Submit">
</form>

<input type="text" id="dynamicField">

<script>
  // Dynamically set focus for an input field
  document.getElementById("dynamicField").focus();
</script>

♿ Accessibility

• Use sparingly — Unexpected focus changes can disorient screen reader users.
• One primary field — Autofocus works best on the main task field (search, username).
• Do not skip labels — Always pair focused fields with visible <label> elements.
• Respect user context — Avoid autofocus on general content pages where users read before typing.
• Mobile keyboards — Autofocus may open the virtual keyboard immediately; ensure that is intentional.

💡 Best Practices

• Use the autofocus attribute sparingly to avoid overwhelming users with too many focused elements when a page loads.
• Consider user accessibility; ensure that automatically focused elements don’t hinder the navigation experience for users who rely on screen readers or other assistive technologies.
• Test your pages across different browsers to ensure consistent behavior, as browser support for the autofocus attribute may vary.