Ayuda a los usuarios a evitar que vuelvan a ingresar datos en los formularios

Luego de aprender sobre los elemento de formulario y cómo crear un formulario interactivos, veamos cómo puede ayudar a los usuarios a evitar el reingreso de datos.

Completar formularios puede llevar mucho tiempo. Por ejemplo, volver a ingresar tu dirección varias veces en todos los sitios donde deseas comprar algo no es una buena experiencia de compra.

La función Autocompletar puede ayudarte aquí. Debes ingresar tu dirección una vez. A partir de ahora, tu navegador te ofrecerá la opción de completar automáticamente la misma dirección para otros formularios.

¿Te mudaste a otra ciudad? No te preocupes por tener la dirección anterior como opción para siempre. Puedes editar los datos de la dirección que guardó el navegador para mantenerlo actualizado.

¿Cómo funciona Autocompletar en el navegador?

Un campo de dirección puede tener un aspecto muy diferente en distintos sitios. ¿Cómo sabe un navegador que es un campo de dirección?

Los navegadores usan heurística para identificar un campo de dirección. ¿Cuáles son los valores de los atributos name, type y id? ¿Hay un atributo autocomplete presente en el control del formulario?

Según esta información, Los navegadores pueden ofrecer la opción de autocompletar un campo con datos del mismo tipo ingresados previamente. Los navegadores incluso pueden ofrecer autocompletar un formulario completo.

Ayuda a los navegadores con la función Autocompletar

Veamos lo que puedes hacer para ayudar a los navegadores a ofrecer las opciones correctas de autocompletar.

Usa valores de atributos sensatos

Como aprendiste, los navegadores pueden identificar el tipo de datos observando los atributos de un control de formulario.

<label for="email">Email</label>
<input type="email" name="email" id="email">

¿Tienes un campo donde los usuarios deban ingresar su dirección de correo electrónico? Usa email como valor para los atributos name, id y type. Tres sugerencias para el navegador de que se trata de un campo de correo electrónico.

El atributo de autocompletado

Hay otros ejemplos en los que aún puede ser difícil para los navegadores identificar el tipo de datos solo a partir de los atributos name, id y type. Puedes ayudar en este proceso usando el atributo autocomplete.

¿Ya ingresaste un nombre en el navegador que estás usando? Es probable que el navegador te ofrezca la opción de volver a completar este campo de la demostración.

Puedes obtener más información sobre el uso de autocompletar y autocompletar en un módulo posterior.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre Autocompletar

¿En función de qué atributos se ofrece Autocompletar?

El atributo autocomplete
Todas las opciones anteriores
El atributo name
El atributo type

Recursos