Optimizar la conversión: la guía completa del atributo autocomplete en HTML

En internet, la fricción es el enemigo número uno. Cada campo que un usuario debe completar manualmente es una oportunidad para que abandone tu sitio. Esto se conoce como abandono de formulario. Para un sitio de comercio electrónico o un servicio en línea, esto representa una pérdida directa de dinero.

Sin embargo, existe una solución técnica gratuita, nativa y de altísimo rendimiento: el atributo autocomplete. Según las cifras de Zuko, el uso correcto de la autocompletado aumenta la tasa de éxito de los formularios del 59% al 71%.

Esta guía te explica cómo transformar tus formularios utilizando únicamente HTML.

#¿Por qué el autocomplete lo cambia todo?

Completar un formulario requiere un esfuerzo importante, especialmente en un teléfono móvil. El usuario debe hacer clic en el campo, esperar a que aparezca el teclado, escribir su información sin errores y luego pasar al siguiente campo.

El atributo autocomplete permite que el navegador haga todo este trabajo por el usuario. En una fracción de segundo, el navegador identifica los datos guardados en su sistema y ofrece completar todo el formulario de una vez.

La diferencia entre “heurística” y “semántica”

Si no incluyes el atributo autocomplete, el navegador intenta adivinar qué debe completar. Esto se llama heurística. Observa el nombre del campo (name=prenom) o el texto adyacente. Pero los navegadores suelen cometer errores, especialmente si tu sitio está traducido a varios idiomas.

Al añadir autocomplete, proporcionas una instrucción semántica. Le dices al navegador: “Este campo es exactamente para el nombre”. Ya no hay lugar para el error. La ganancia de rendimiento es inmediata porque el navegador ya no necesita analizar tu código para adivinar tus intenciones.

#1. Identidad del usuario

Es la base de cualquier formulario. Para que el navegador sugiera la información correcta, debes usar los tokens estándar.

Aquí tienes un ejemplo de código optimizado para la identidad:

Copy
<div class=form-group>
  <label for=first-name>First Name</label>
  <input id=first-name name=fname type=text autocomplete=given-name required>
</div>

<div class=form-group>
  <label for=last-name>Last Name</label>
  <input id=last-name name=lname type=text autocomplete=family-name required>
</div>

<div class=form-group>
  <label for=nickname>Username</label>
  <input id=nickname name=user type=text autocomplete=nickname>
</div>

<div class=form-group>
  <label for=job-title>Job Position</label>
  <input id=job-title name=position type=text autocomplete=organization-title>
</div>

¿Por qué separar el nombre y el apellido?

Algunos formularios usan un único campo de “Nombre completo”. Es un error para el rendimiento del autocompletado. Los navegadores suelen guardar el nombre y el apellido por separado. Al usar given-name y family-name, garantizas un llenado perfecto.

#2. Datos de contacto

Los errores tipográficos en las direcciones de correo electrónico o números de teléfono son las principales causas del fracaso en la creación de cuentas. El autocompletado elimina este riesgo.

Copy<!-- Detalles de contacto optimizados para la interacción móvil -->
<div class=form-group>
  <label for=user-email>Email Address</label>
  <input id=user-email name=email type=email autocomplete=email required>
</div>

<div class=form-group>
  <label for=user-phone>Phone Number</label>
  <input id=user-phone name=phone type=tel autocomplete=tel>
</div>

Nota técnica: Usa siempre type=email y type=tel además del autocomplete. Esto permite que los smartphones muestren el teclado correcto (teclado numérico para el teléfono), lo que aumenta aún más la velocidad de entrada.

#3. La dirección postal: El desafío del e-commerce

La dirección es la parte más larga de completar. A menudo contiene cinco o seis campos diferentes. Aquí es donde el impacto en la conversión es más fuerte.

Copy<div class=form-group>
  <label for=street>Street Address</label>
  <input id=street name=addr1 type=text autocomplete="shipping street-address">
</div>

<div class=form-group>
  <label for=city>City</label>
  <input id=city name=city type=text autocomplete="shipping address-level2">
</div>

<div class=form-group>
  <label for=zip>Zip Code</label>
  <input id=zip name=zip type=text autocomplete="shipping postal-code">
</div>

<div class=form-group>
  <label for=country>Country</label>
  <input id=country name=country type=text autocomplete="shipping country">
</div>

Al añadir la palabra shipping antes del token (por ejemplo, shipping postal-code), indicas al navegador que se trata de la dirección de envío. Si es la dirección de facturación, se usará billing. Esto permite al navegador ofrecer dos direcciones diferentes si el usuario las tiene guardadas.

#4. Pagos y seguridad

Completar los números de tarjeta bancaria es estresante para el usuario. Al automatizar este paso, reduces la ansiedad y aceleras el pago.

Copy<!-- Campos de pago con autocompletado nativo seguro -->
<div class=form-group>
  <label for=card-num>Card Number</label>
  <input id=card-num name=cnum type=text autocomplete=cc-number>
</div>

<div class=form-group>
  <label for=card-name>Name on Card</label>
  <input id=card-name name=cname type=text autocomplete=cc-name>
</div>

<div class=form-group>
  <label for=card-exp>Expiry Date</label>
  <input id=card-exp name=cexp type=text autocomplete=cc-exp>
</div>

Contrariamente a lo que se cree, es más seguro. El usuario no necesita sacar su tarjeta en un lugar público. El navegador protege estos datos con una contraseña o huella digital (TouchID/FaceID).

#5. Gestión de contraseñas

Este es uno de los puntos más críticos. Una mala configuración del autocomplete puede bloquear a un usuario que intenta iniciar sesión.

• Para el inicio de sesión: Usa autocomplete=current-password.
• Para el registro: Usa autocomplete=new-password.

Esto indica al gestor de contraseñas si debe sugerir una clave antigua o generar una nueva de forma segura.

#6. Accesibilidad (WCAG): un derecho para todos

La accesibilidad web no es solo para personas ciegas. También concierne a personas con dificultades motoras (dificultad para escribir) o cognitivas (dificultad para recordar su propia información).

La norma WCAG 2.1 impone la identificación de la finalidad de la entrada (criterio 1.3.5). El atributo autocomplete es la solución oficial para cumplir con esta regla. Sin él, tu sitio puede ser considerado no conforme con las leyes de accesibilidad.

#7. Rendimiento: ¿por qué lo nativo siempre gana?

Muchos sitios usan scripts pesados de JavaScript para ayudar en la entrada (búsqueda de direcciones por API). Aunque estas herramientas son útiles, ralentizan la página. Requieren tiempo para cargar el script y ejecutar el código.

El atributo HTML autocomplete tiene un coste de rendimiento de cero.

1. Sin peticiones de red adicionales.
2. Sin tiempo de cálculo para el procesador.
3. Funciona incluso si la red es lenta o si el JavaScript está bloqueado.

#Errores que debes evitar absolutamente

• El abuso de autocomplete=off: Algunos desarrolladores piensan que aumentan la seguridad prohibiendo el autocompletado. Es lo contrario. Obligas al usuario a usar contraseñas simples para recordarlas.
• Nombres de campos extraños: Si usas name=campo_1, el navegador tendrá dificultades para entenderlo sin el atributo autocomplete. Sé siempre explícito.

#Conclusión

La optimización de un formulario no consiste en añadir funciones complejas, sino en el uso inteligente de los estándares web. El atributo autocomplete es la herramienta más poderosa para mejorar la experiencia del usuario sin comprometer el rendimiento.

Como desarrollador o responsable de un sitio, tu misión es reducir el esfuerzo de tus visitantes. Un formulario que se completa solo es un formulario que convierte.

Preguntas frecuentes

Lionel Péramo

Experto en Rendimiento Web y Ecodiseño

Desarrollador Full Stack y creador del framework OTRA (PHP) y de la librería EcoComposer. Escribo para hacer la web más rápida e inclusiva.

Sobre mí →