Autocompletar

Tener que volver a ingresar tu dirección por décima vez es agotador. Como desarrollador, los navegadores y tú pueden ayudar a los usuarios a ingresar datos más rápido y evitar tener que volver a ingresarlos. En este módulo, aprenderás cómo funciona el autocompletado y cómo autocomplete y otros atributos de elementos pueden garantizar que los navegadores ofrezcan las opciones de autocompletado adecuadas.

¿Cómo funciona Autocompletar?

En la introducción al autocompletado, ya aprendiste los conceptos básicos del autocompletado. Pero ¿por qué los navegadores ofrecen Autocompletar?

Completar formularios no es una actividad interesante, pero aun así es algo que haces a menudo. Con el tiempo, completas muchos formularios y sueles completar los mismos datos. Una forma de ayudar a los usuarios a completar los formularios más rápido es ofrecerles la opción de completar de forma automática los campos del formulario con los datos ingresados anteriormente. Eso es autocompletar.

¿Cómo saben los navegadores qué datos autocompletar? Observa un campo de formulario de ejemplo para averiguarlo.

<label for="name">Name</label>
<input name="name" id="name">

Si envías este campo del formulario, los navegadores almacenan el valor (los datos que ingresaste) junto con el valor del atributo name (nombre). Algunos navegadores también observan el atributo id cuando almacenan y completan datos.

Supongamos que, unas semanas después, completas otro formulario en otro sitio web. Este sitio también contiene un campo de formulario con name="name". El navegador ahora puede ofrecer autocompletado debido a que ya se almacenó un valor para el nombre.

Esta función es especialmente útil en los formularios que usas con frecuencia, como los registros y el acceso, los pagos, la confirmación de la compra y los formularios en los que debes ingresar tu nombre o dirección.

Puedes ayudar a los navegadores a ofrecer las mejores opciones de autocompletado usando los valores apropiados para el atributo autocomplete. Hay muchos valores posibles para autocomplete. Este es un ejemplo de direcciones.

¿Tu navegador ya tiene una dirección guardada para ti? ¡Genial! Una vez que interactúes con el primer campo del formulario de dirección, el navegador te mostrará una lista de las direcciones guardadas. Si eliges una, el navegador completará todos los campos relacionados con la dirección. La función Autocompletar permite que completar formularios sea rápido y fácil.

No todos los formularios de dirección tienen los mismos campos y el orden de los campos también varía. Usar los valores correctos para autocomplete garantiza que el navegador complete los valores correctos para un formulario. Hay valores para country, postal-code y muchos más.

Asegúrate de que los usuarios puedan acceder rápidamente y usar contraseñas seguras

Muchas personas no son buenas para recordar contraseñas. La contraseña más común es "123456", seguida de otras combinaciones fáciles de recordar. ¿Cómo puedes usar contraseñas seguras y únicas sin recordarlas todas?

Los navegadores tienen administradores de contraseñas integrados para generar, guardar y completar las contraseñas por ti. Descubre cómo puedes ayudar a los navegadores con la función para autocompletar correos electrónicos y la administración de contraseñas.

Puedes usar autocomplete="email" para un campo de correo electrónico, de modo que los usuarios obtengan la opción de autocompletar para una dirección de correo electrónico.

Como se trata de un formulario de registro, los usuarios no deberían tener la opción de completar las contraseñas que se usaron con anterioridad. Puedes usar autocomplete="new-password" para asegurarte de que los navegadores ofrezcan la opción de generar una contraseña nueva.

En el formulario de acceso, puedes usar autocomplete="current-password" para indicarles a los navegadores que ofrezcan la opción de completar las contraseñas guardadas previamente para este sitio web.

Puedes configurar la autenticación de dos factores en muchos sitios web. Además de la contraseña, se envía un código de un solo uso con SMS o una app de autenticación de dos factores.

¿No sería genial si el código que recibiste en el mensaje SMS fuera sugerido por el teclado en pantalla y pudieras seleccionarlo directamente para completar el valor? En Safari 14 o versiones posteriores, puedes usar autocomplete="one-time-code" para lograrlo. En Chrome para Android, puedes usar la API de WebOTP para lograrlo con JavaScript.

Obtén más información para verificar números de teléfono en la Web con las prácticas recomendadas del formulario de OTP por SMS.

Ayuda a los usuarios a completar la información de su tarjeta de crédito

En muchos sitios web de comercio electrónico, puedes usar tu tarjeta de crédito para comprar productos. Los sitios pueden usar plataformas de pago de terceros que proporcionan sus propios formularios, pero si necesitas crear los tuyos, asegúrate de que las personas puedan completar la información de pago con facilidad.

Puedes volver a usar el atributo autocomplete para asegurarte de que los navegadores ofrezcan las opciones de autocompletado correctas.

Hay valores para el número de tarjeta de crédito cc-number, la fecha de vencimiento de la tarjeta de crédito cc-exp y toda la información adicional necesaria para un pago con tarjeta de crédito.

Usa una sola entrada para números, como números de tarjetas de crédito y de teléfono, a fin de asegurarte de que los navegadores ofrezcan la función Autocompletar. Usa elementos de formulario estándar, por ejemplo, una <select> para las fechas de la tarjeta de pago, en lugar de elementos personalizados, para garantizar que el autocompletado esté disponible.

Obtén más información sobre cómo ayudar a los usuarios a evitar tener que volver a ingresar sus datos de pago.

Cómo asegurarte de que el autocompletado funcione en todos tus campos

Además de direcciones, información de la cuenta y de la tarjeta de crédito, hay muchos más campos en los que los navegadores pueden ayudar a los usuarios con el autocompletado.

Cuando agregues un campo de teléfono a tu formulario, verifica si puedes usar alguno de los valores disponibles para el autocompletado. ¿Encontraste un valor adecuado para tu campo de formulario? Agrégala.

El uso de valores adecuados para el atributo autocomplete ayuda a los navegadores a ofrecer la mejor opción de autocompletado y ayuda a los usuarios a completar formularios más rápido.

Ayuda a los navegadores a comprender que no se debe autocompletar un campo

Aprendiste cómo funciona Autocompletar, cómo puedes ayudar a los navegadores con esta función y por qué esta función facilita que los usuarios completen formularios. Sin embargo, a veces, no quieres que los navegadores ofrezcan la función Autocompletar.

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

Un lugar en el que el autocompletado no resulta útil es cuando se ingresan valores únicos y únicos, como un campo de código único. El valor es diferente cada vez, y el navegador no debería guardar valores ni ofrecer la opción de autocompletar. Puedes usar autocomplete="off" para esos campos a fin de evitar el autocompletado.

Otro caso de uso para autocomplete="off" es un campo honeypot (consulta el módulo anterior). Aunque el campo no es visible, los navegadores pueden autocompletarlo con el resto de los campos. Desactivar el autocompletado garantiza que no se identifique un usuario real como un bot, ya que el campo se completa automáticamente.

Solo debes inhabilitar la función Autocompletar si estás seguro de que ayudará a los usuarios.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre Autocompletar

¿Qué valor de autocompletado debes usar para el campo de contraseña en un formulario de registro?

autocomplete="password"
Vuelve a intentarlo.
autocomplete="off"
Vuelve a intentarlo.
autocomplete="new-password"
🎉
autocomplete="current-password"
Vuelve a intentarlo.

Recursos