Es agotador tener que volver a ingresar tu dirección por décima vez. Los navegadores y tú, como desarrollador, pueden ayudar a los usuarios a ingresar datos más rápido y evitar que los vuelvan a ingresar.
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 opciones de autocompletado adecuadas.
¿Cómo funciona Autocompletar?
En la introducción a Autocompletar, ya aprendiste los conceptos básicos de esta función. Pero ¿por qué los navegadores ofrecen la función de autocompletar?
Completar formularios no es una actividad interesante, pero es algo que haces a menudo. Con el tiempo, completas muchos formularios y, a menudo, ingresas los mismos datos. Una forma de ayudar a los usuarios a completar formularios más rápido es ofrecerles la opción de completar automáticamente los campos con datos ingresados anteriormente. Eso es Autocompletar.
¿Cómo saben los navegadores qué datos deben autocompletar? Echa un vistazo a un campo de formulario de ejemplo para averiguarlo.
<label for="name">Name</label>
<input name="name" id="name">
Si envías este campo de formulario, los navegadores almacenan el valor (los datos que ingresaste) junto con el valor del atributo name (nombre). Algunos navegadores también consultan el atributo id cuando almacenan y completan datos.
Supongamos que, semanas después, completas otro formulario en otro sitio web. Este sitio también contiene un campo de formulario con name="name". Ahora tu navegador puede ofrecer la función de autocompletar, ya que ya se almacenó un valor para el nombre.
Autocompletar es especialmente útil en los formularios que usas con frecuencia, como los de registro y acceso, pago, confirmación de compra y aquellos en los que debes ingresar tu nombre o dirección.
Puedes ayudar a los navegadores a ofrecer las mejores opciones de autocompletado usando valores adecuados para el atributo autocomplete. Hay muchos valores posibles para autocomplete. Este es un ejemplo de direcciones.
¿Tu navegador ya tiene una dirección guardada? ¡Genial! Después de interactuar con el primer campo del formulario de dirección, el navegador te mostrará una lista de direcciones guardadas. Puedes elegir una, y el navegador completará todos los campos relacionados con la dirección. La función Autocompletar facilita y agiliza el proceso de completar formularios.
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 únicas y seguras sin tener que recordarlas todas?
Los navegadores tienen administradores de contraseñas integrados para generar, guardar y completar contraseñas por ti. Descubre cómo puedes ayudar a los navegadores a completar automáticamente correos electrónicos y administrar 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 contraseñas que ya se usaron. 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 anteriormente 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 por SMS o por una app de autenticación de dos factores.
¿No sería genial que el teclado en pantalla sugiriera el código que recibiste en el mensaje SMS y que 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 lograr esto 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.
Precaución: El SMS no es el método de autenticación más seguro por sí solo, ya que los números de teléfono se pueden reciclar y hackear. Considera usar otros métodos de autenticación de dos factores o la autenticación de varios factores.
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 tus propios formularios de pago, asegúrate de que las personas puedan completar fácilmente la información de pago.
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 demás información 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 números de teléfono, para garantizar que los navegadores ofrezcan la función de autocompletar. Usa elementos de formulario estándar, por ejemplo, un <select> para las fechas de la tarjeta de pago, en lugar de elementos personalizados, para garantizar que la función de autocompletar esté disponible.
Obtén más información para ayudar a los usuarios a evitar volver a ingresar datos de pago.
Asegúrate de que el autocompletado funcione en todos tus campos
Además de las direcciones, la información de la cuenta y la información de la tarjeta de crédito, hay muchos más campos en los que los navegadores pueden ayudar a los usuarios con la función Autocompletar.
Cuando agregues un campo de teléfono a tu formulario, verifica si puedes usar alguno de los valores disponibles para la función de autocompletar. ¿Encontraste un valor adecuado para el campo de tu formulario? Agrégalo.
Usar valores adecuados para el atributo autocomplete ayuda a los navegadores a ofrecer la mejor opción de autocompletar y a los usuarios a completar formularios más rápido.
Ayuda a los navegadores a comprender que un campo no se debe autocompletar
Aprendiste cómo funciona Autocompletar, cómo puedes ayudar a los navegadores con esta función y por qué Autocompletar facilita a los usuarios completar formularios. Sin embargo, a veces no quieres que los navegadores ofrezcan la función de autocompletar.
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
El autocompletado no es útil cuando se ingresan valores únicos y de un solo uso, como un campo de código único. El valor es diferente cada vez, y el navegador no debe guardar valores ni ofrecer una opción de autocompletar. Puedes usar autocomplete="off" para evitar el autocompletado en esos campos.
Otro caso de uso de autocomplete="off" es un campo de trampa (consulta el módulo anterior). Aunque el campo no sea visible, es posible que los navegadores lo autocompleten con el resto de los campos. Desactivar la función de autocompletar garantiza que no se identifique a un usuario real como un bot debido a que el campo se completó automáticamente.
Solo debes inhabilitar la función de autocompletar si tienes la certeza de que ayudará a los usuarios.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre el autocompletado
¿Qué valor de autocompletado debes usar para el campo de contraseña en un formulario de registro?
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"