Después de aprender sobre el elemento de formulario y cómo hacer que un formulario sea interactivo, veamos cómo puedes ayudar a los usuarios a evitar volver a ingresar datos.
Aprovecha al máximo la función Autocompletar
Completar formularios puede llevar mucho tiempo. Por ejemplo, volver a ingresar tu dirección de forma reiterada en cada sitio en el que quieras comprar algo no es una experiencia de compra agradable.
La función Autocompletar puede ayudarte en este caso. Solo debes ingresar tu dirección una vez. A partir de ahora, el 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ó tu navegador para mantenerlos actualizados.
¿Cómo funciona Autocompletar en el navegador?
Un campo de dirección puede tener un aspecto muy diferente en diferentes sitios. ¿Cómo sabe un navegador que se trata de un campo de dirección?
Los navegadores usan heurísticas 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 de formulario?
En función de esta información, los navegadores pueden ofrecer la opción de autocompletar un campo con datos ingresados anteriormente del mismo tipo. Los navegadores incluso pueden ofrecer autocompletar un formulario completo.
Ayuda a los navegadores con la función Autocompletar
Veamos qué puedes hacer para ayudar a los navegadores a ofrecer las opciones de autocompletado correctas.
Usa valores de atributos adecuados
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 en el que los usuarios deben 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 puede ser difícil para los navegadores identificar el tipo de datos solo a partir de los atributos name, id y type.
Puedes ayudar con 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 en la demostración.
Puedes obtener más información para usar autocompletado y autocompletar en un módulo posterior.
Verifica tu comprensión
Pon a prueba tus conocimientos sobre el autocompletado
¿En función de qué atributos se ofrece la función Autocompletar?
nametypeautocomplete