How do you use the autofocus attribute in HTML5?

The autofocus attribute automatically focuses a form element when a page loads. 2. It is a boolean attribute, so no value is needed—just include autofocus in the tag. 3. Only one element per page should use it to avoid unpredictable behavior. 4. It works on input, textarea, select, and button elements. 5. It is commonly used on login or search forms to enhance usability. 6. While widely supported, it should be used carefully to avoid disrupting screen reader or keyboard navigation. 7. Example: adding autofocus to a username field lets users begin typing immediately upon page load.

The autofocus attribute in HTML5 is a simple way to automatically place the text cursor into a form field when a page loads. This can improve user experience by reducing the number of clicks needed to start interacting with a form.

You use it by adding the autofocus attribute directly to a focusable HTML element—most commonly input fields like <input>, <textarea>, or <button>.

Here’s how it works:

Basic Syntax

<input type="text" autofocus>

Or with other form elements:

<textarea autofocus></textarea>
<button type="submit" autofocus>Submit</button>

Key Points to Remember

• It’s a boolean attribute: You don’t need to assign a value. Just including autofocus is enough.
• Only one element should have autofocus per page: While HTML5 allows it, having multiple elements with autofocus can lead to unpredictable behavior across browsers. The browser will typically focus the first one it encounters.
• Works on most interactive elements: Including input, select, textarea, and button.
• Can be useful on login or search pages:

  <input type="search" name="q" placeholder="Search..." autofocus>

  This immediately lets users start typing in a search box when they land on the page.

  

Browser Support and Accessibility

• Supported in all modern browsers.
• Use with care: Automatically moving focus can disorient screen reader users or those navigating with keyboards. Consider whether autofocus truly enhances the experience for all users.
• Avoid using autofocus on pages with long forms or when the input isn’t the primary purpose of the page.

Example in Context

<form action="/login" method="post">
  <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">

  <button type="submit">Log In</button>
</form>

In this case, the username field will be focused as soon as the page loads.

Basically, just add autofocus to the input you want to be active by default. It’s simple, effective, and requires no JavaScript.

The above is the detailed content of How do you use the autofocus attribute in HTML5?. For more information, please follow other related articles on the PHP Chinese website!