El Atributo AUTOFOCUS

Permite establecer el enfoque automático en un elemento del formulario cuando la página se carga.

El atributo autofocus en HTML permite establecer el enfoque automático en un elemento del formulario (como <input>, <textarea>, o <button>) cuando la página se carga. Esto mejora la experiencia del usuario al dirigir su atención inmediatamente a un campo clave, como un buscador o un formulario de inicio de sesión. A continuación, te explicamos cómo usarlo correctamente.

¿Qué es el atributo `autofocus`?

Propósito:
Enfoca automáticamente un elemento al cargar la página, listo para que el usuario escriba o interactúe sin hacer clic.
Tipo de atributo:
Booleano (no requiere valor: <input autofocus>).
Compatibilidad:
Funciona en todos los navegadores modernos (Chrome, Firefox, Safari, Edge).

Sintaxis básica

<input type="text" autofocus placeholder="Escribe aquí...">

Ejemplos prácticos

Campo de búsqueda destacado

<form>
  <input 
    type="search" 
    autofocus 
    placeholder="Buscar productos..." 
    aria-label="Buscar"
  >
  <button type="submit">Buscar</button>
</form>

Resultado:
El cursor parpadea en el campo de búsqueda al cargar la página.

Formulario de inicio de sesión

<form>
  <label>Usuario: 
    <input type="text" autofocus placeholder="Nombre de usuario">
  </label>
  <label>Contraseña: 
    <input type="password" placeholder="Contraseña">
  </label>
  <button type="submit">Ingresar</button>
</form>

Botón principal en una aplicación

<button autofocus onclick="iniciar()">Comenzar</button>

Consideraciones importantes

Solo un elemento por página:
Si múltiples elementos tienen autofocus, el último en el DOM recibirá el enfoque.
No funciona en elementos ocultos:
Si el campo está dentro de un contenedor oculto (ej: display: none), el enfoque fallará.
Accesibilidad:
El enfoque automático puede confundir a usuarios con discapacidad visual. Úsalo solo cuando sea necesario y esperado (ej: un buscador).
Móviles:
Algunos navegadores móviles desplazan la pantalla hacia el campo enfocado, lo que puede no ser deseado.

Alternativa con JavaScript

Si necesitas más control, usa el método .focus():

<input type="text" id="campoPrincipal">
<script>
  document.getElementById("campoPrincipal").focus();
</script>

Ventajas:

Puedes enfocar elementos después de ciertas acciones (ej: hacer clic en un botón).
Funciona incluso si el elemento estaba oculto inicialmente.

Errores comunes

Usar autofocus en múltiples elementos:
Solo el último elemento con el atributo recibirá el enfoque.
Enfocar campos no interactivos:
Elementos como <div> o <p> no pueden recibir enfoque.
Ignorar el contexto móvil:
Verifica que el desplazamiento automático no afecte la experiencia en pantallas pequeñas.

Mejores prácticas

Úsalo en formularios de un solo campo:
Ejemplo: una página de búsqueda donde el usuario solo necesita escribir una consulta.
Evítalo en páginas con múltiples secciones:
Podría molestar si el usuario espera interactuar con otra parte del sitio.
Combínalo con placeholder:
Guía al usuario sobre qué ingresar en el campo enfocado.
Prueba en diferentes dispositivos:
Asegúrate de que el enfoque automático no cause desplazamientos no deseados.

Compatibilidad

Navegadores modernos:
Chrome, Firefox, Safari, Edge y Opera (todas las versiones recientes).
Navegadores antiguos:
IE11 y anteriores no soportan autofocus; usa JavaScript en su lugar.

Conclusión

El atributo autofocus es una herramienta útil para:

Mejorar la usabilidad en formularios clave.
Acelerar la interacción del usuario en páginas centradas en entrada de datos.
Destacar elementos importantes de manera intuitiva.

Ejemplo final:

<!DOCTYPE html>
<html>
<head>
  <title>Buscador</title>
</head>
<body>
  <h1>Búsqueda rápida</h1>
  <form>
    <input 
      type="search" 
      autofocus 
      placeholder="Buscar..." 
      aria-label="Buscar"
    >
  </form>
</body>
</html>

¡Usa autofocus con moderación para crear experiencias fluidas y enfocadas en el usuario!

¿Qué es el atributo autofocus?