Autocompletar

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

¿Cómo funciona Autocompletar?

En la introducción a Autocompletar, ya aprendiste los conceptos básicos de autocompletar. Pero ¿por qué los navegadores ofrecen Autocompletar?

Completar formularios no es una actividad interesante, pero igual es algo que haces. con frecuencia. Con el tiempo, completarás muchos formularios y, a menudo, también incluirás los mismos datos. Una forma de ayudar a los usuarios a completar formularios más rápido es ofreciéndoles la opción de completar automáticamente los campos del formulario con los datos ingresados previamente. Eso es Autocompletar.

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

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

Si envías este campo de formulario, los navegadores almacenarán el valor (los datos que ingresaste). junto con el valor del atributo name (name). Algunos navegadores también buscan el atributo id cuando almacenas y completas datos

Supongamos que, semanas más tarde, completas otro formulario en otro sitio web. Este sitio también contiene un campo de formulario con name="name". Tu navegador ahora puede ofrecer Autocompletar, porque 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 la compra y formularios en los que debas ingresar tu nombre o web.

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

¿Tu navegador ya tiene una dirección guardada? ¡Genial! Después de interactuar con el primer campo en el formulario de dirección, el navegador te muestra una lista de direcciones guardadas. Puedes elegir una, y el navegador completará todos los campos relacionadas con la dirección. Autocompletar te permite completar formularios de manera rápida y fácil.

No todos los formularios de dirección tienen los mismos campos, y el orden de los campos también varía. El uso de los valores correctos para autocomplete garantiza que el navegador complete los valores correctos de 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 recuerdan bien las contraseñas. Las más comunes contraseña es "123456", seguido 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 contraseñas por ti. Descubre cómo puedes ayudar a los navegadores con correos electrónicos que se completan automáticamente y administrar contraseñas.

Puedes usar autocomplete="email" para un campo de correo electrónico, de modo que los usuarios obtengan la funció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 para completarlo anteriormente contraseñas usadas. Puedes usar autocomplete="new-password" para asegurarte de que los navegadores te ofrece la opción de generar una contraseña nueva.

En el formulario de acceso, puedes usar autocomplete="current-password" para indicarle navegadores para ofrecer la opción de completar contraseñas guardadas previamente para esta sitio web.

Puedes configurar la autenticación de dos factores en muchos sitios web. Además del artículo se envía un código de un solo uso por SMS o una app con 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 puedes seleccionarlo directamente para completar la valor? En Safari 14 o versiones posteriores, puedes usar autocomplete="one-time-code" para lograrlo. En Chrome para Android, puedes usar el WebOTP API para lograr esto con JavaScript.

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

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 para asegurarte de que las personas puedan completarlos la información de pago.

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

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

Usa una sola entrada para números de tarjetas de crédito, números de teléfono para garantizar que los navegadores ofrecen la función Autocompletar. Usa elementos de formulario estándar para Por ejemplo, un <select> para las fechas de la tarjeta de pago, en lugar de elementos personalizados, para asegurarse de que la función de autocompletar esté disponible.

Más información sobre cómo ayudar a los usuarios a evitar que vuelvan a realizar un pago los datos en la nube.

Asegúrate de que la función Autocompletar funcione en todos tus campos

Además de direcciones, información de cuentas e información de tarjetas de crédito, hay muchos otros campos en los que los navegadores pueden ayudar a los usuarios con el autocompletado.

Cuando agregues un campo de teléfono al formulario, verifica si puedes usar alguno de los disponibles valores para autocompletar. ¿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 la mejor opción de Autocompletar y ayuda a los usuarios a completar formularios más rápido.

Ayuda a los navegadores a comprender que un campo no debe autocompletarse

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

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

La función Autocompletar no resulta útil cuando se ingresan valores únicos y únicos. como un campo de código de un solo uso. El valor es diferente cada vez, y la el navegador no debe guardar los valores ni ofrecer la opción de autocompletar. Puedes usar autocomplete="off" para estos campos a fin de evitar el autocompletado.

Otro caso de uso de autocomplete="off" es un campo honeypot (consulta las secciones módulo). Aunque el campo no está los navegadores pueden autocompletarla con el resto de los campos. Activando Autocompletar y garantiza que un usuario real no sea identificado como un bot, debido a que el campo completar automáticamente.

Solo debes inhabilitar la función Autocompletar si tienes la certeza de que ayudará a los usuarios.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre Autocompletar

Recursos

• La función de autocompletar .
  • Forma de pago y dirección prácticas