El Atributo AUTOCOMPLETE

Controla la funcionalidad de autocompletado en campos de formularios.

El atributo autocomplete controla la funcionalidad de autocompletado en campos de formularios, mejorando la experiencia del usuario al sugerir valores ingresados previamente. También permite desactivar esta función para evitar distracciones o riesgos de seguridad. Aquí te explicamos cómo usarlo correctamente.

¿Qué es el atributo autocomplete?

  • Propósito:
    Indica si un campo (<input>, <select>, <textarea>) debe mostrar sugerencias automáticas basadas en el historial del usuario.

  • Valores:
    on (activado), off (desactivado) o tokens específicos (ej: email, address-line1, current-password).

  • Importancia:

    • Mejora la accesibilidad y usabilidad.

    • Ayuda a navegadores y gestores de contraseñas a rellenar datos.

    • Reduce errores en formularios complejos.

Valores básicos: on y off

autocomplete="on" (activo por defecto)

Permite al navegador sugerir valores basados en el historial.

<input type="text" name="nombre" autocomplete="on">

autocomplete="off" (desactivar)

<input type="text" name="codigo-seguro" autocomplete="off">

⚠️ Nota: Algunos navegadores (Chrome, Firefox) ignoran off por seguridad.
Solución alternativa: Usa un valor aleatorio (ej: autocomplete="nope").

Tokens específicos para tipos de datos

Los navegadores usan estos tokens para autocompletar información precisa.
Ejemplos comunes:

Token Uso
name Nombre completo.
email Dirección de correo electrónico.
tel Número de teléfono.
street-address Dirección física.
current-password Contraseña actual (ej: login).
new-password Nueva contraseña (ej: registro).
cc-number Número de tarjeta de crédito.

Ejemplos prácticos

Formulario de registro

Ayuda al usuario a completar datos personales:

<input type="text" name="nombre" autocomplete="name" placeholder="Nombre">
<input type="email" name="email" autocomplete="email" placeholder="Correo">
<input type="password" name="password" autocomplete="new-password" placeholder="Contraseña">

Formulario de pago

Autocompleta datos de tarjeta de crédito:

<input type="text" name="tarjeta" autocomplete="cc-number" placeholder="Número de tarjeta">
<input type="month" name="expiracion" autocomplete="cc-exp" placeholder="MM/AAAA">

Formulario de login

Sugiere el nombre de usuario pero no la contraseña:

<input type="text" name="usuario" autocomplete="username" placeholder="Usuario">
<input type="password" name="contraseña" autocomplete="current-password" placeholder="Contraseña">

Campos sensibles (desactivar autocompletado)

Evita sugerencias en campos críticos:

<input type="text" name="pin" autocomplete="off" placeholder="PIN de un solo uso">

Mejores prácticas

Usa tokens específicos siempre que sea posible:

Ayuda a los navegadores a proporcionar sugerencias precisas.

No abuses de autocomplete="off":

Solo desactívalo en campos sensibles (ej: códigos de seguridad).

Prueba en múltiples navegadores:

Chrome, Firefox y Safari pueden comportarse distinto.

Combina con <form> y <label>:

Mejora la semántica y accesibilidad.

<form autocomplete="on">
  <label>Dirección: 
    <input type="text" autocomplete="street-address">
  </label>
</form>

Errores comunes

Usar autocomplete="off" en campos de contraseña:

Los navegadores ignorarán esta configuración por seguridad.

En su lugar, usa autocomplete="new-password" o current-password.

No utilizar tokens en formularios complejos:

Si el campo es para un código postal, usa postal-code:

<input type="text" autocomplete="postal-code" placeholder="Código postal">

Compatibilidad

  • Navegadores modernos:
    Todos soportan autocomplete y tokens comunes (Chrome, Firefox, Edge, Safari).

  • Dispositivos móviles:
    Los teclados móviles usan estos tokens para sugerir datos (ej: correo, teléfono).

Conclusión

El atributo autocomplete es esencial para:

  • Acelerar el llenado de formularios.

  • Mejorar la experiencia del usuario.

  • Guiar a navegadores y gestores de contraseñas.

Ejemplo final:

<form>
  <label>Nombre completo: 
    <input type="text" name="nombre" autocomplete="name">
  </label>
  <label>Correo electrónico: 
    <input type="email" name="email" autocomplete="email">
  </label>
  <label>Contraseña nueva: 
    <input type="password" name="password" autocomplete="new-password">
  </label>
  <button type="submit">Registrarse</button>
</form>

¡Usa autocomplete estratégicamente para crear formularios más eficientes y accesibles!