Cómo autocompletar datos en formularios HTML

Si captar y mantener la atención de las personas en nuestras aplicaciones es tarea difícil, ahora, lograr que ingresen información a través de un formulario lo es mucho más.

Y La verdad sea dicha: A las personas no les gusta mucho la idea de diligenciar formularios en Internet; lo hacen cuando es estrictamente necesario o simplemente porque el producto digital o servicio que tienen en frente les fascina.

Por eso, desarrolladores en todo el mundo deben lograr que sus aplicaciones cumplan con unos estándares mínimos para satisfacer a las personas en aspectos como: velocidad de carga, buen diseño, adaptabilidad y buena experiencia de uso y navegación. Y por supuesto, buenos formularios.

El diablo está en los detalles

Dicho de otro modo, buenos desarrolladores se diferencian del resto por que son personas que se fijan especialmente en los pequeños detalles. Detalles que cautivan y facilitan la vida de los usuarios.

Los detalles son tan importantes, que la falta de estos son un motivo de abandono. Quizá la persona que diligencie el formulario no los note, pero inconscientemente son un valor agregado para su uso.

El navegador web nos ayuda

En la medida que las personas usan Internet, el navegador va captando y almacenando la información que ingresan en repetidas ocasiones. Esta información, se guarda con el fin de ser utilizada en un futuro y agilizar a las personas el diligenciamiento de formularios de una manera más eficiente.

Sin embargo, esto no es posible por sí solo, y si bien el navegador capta y almacena esta información, la persona que crea aplicaciones web debe extraerla y utilizarla. Esto no quiere decir que la aplicación web tenga acceso a la información que capta y almacena el navegador, simplemente la pone a la disposición para su uso.

El navegador no sabe por sí solo que un campo es un nombre o la descripción de un código postal, entonces, a través de HTML, debemos indicarle al navegador el tipo de dato y cómo debe ser tratado.

Atributo autocomplete

El atributo autocomplete en los formularios HTML es un elemento, que en mi opinión, es muy importante. A través de este, la persona puede diligenciar con un par de clics toda la información de un formulario basado en los datos captados por el navegador web que utiliza.

Gracias a este atributo, las personas pueden autocompletar con un clic información de su nombre, correo electrónico, sexo, edad, país, código postal e incluso su fecha de cumpleaños. Algo que parece muy superficial, pero cuando una aplicación web carece de esta funcionalidad, las personas desisten de ingresar su información.

Insisto, el atributo HTML autocomplete no implica que estemos teniendo acceso a la información del usuario. Este atributo, solo accede a los datos que coloca el navegador web a nuestra disposición.

La manera correcta de escribir el atributo autocomplete es la siguiente:

<input type="text" autocomplete="valor"/>

Ejemplo con el atributo autocomplete HTML

<form action="url_destino">   

    <label for="nombre">            

        <span>Indique su nombre por favor</span>            

        <input type="text" id="nombre" name="nombre" autocomplete="name">        

    </label>        

    <label for="sexo">            

        <span>Indique su sexo por favor</span>            

        <input type="text" id="sexo" name="sexo" autocomplete="sex">        

    </label>        

    <label for="correo">            

        <span>Indique su correo electrónico por favor</span>            

        <input type="text" id="correo" name="correo" autocomplete="email">        

    </label>        

    <label for="nickname">            

        <span>Indique su Nickname por favor</span>            

        <input type="text" id="nickname" name="nickname" autocomplete="nickname">        

    </label>        

    <label for="calle">            

        <span>Indique su calle de residencia por favor</span>            

        <input type="text" id="calle" name="calle" autocomplete="street-address">        

    </label>        

    <label for="telefono">            

        <span>Indique su teléfono de contacto por favor</span>            

        <input type="text" id="telefono" name="telefono" autocomplete="tel">        

    </label>    

</form>

Valores posibles que puede tomar el atributo autocomplete HTML

• off: La persona debe ingresar la información en el formulario, es decir, deshabilita el autocompletado
• on: Permite al navegador autocompletar, sin embargo, no provee la información del tipo de valor que debe ser autocompletado
• name: Nombre
• honorific-prefix: Prefijo (Ejemplos: “Sr.”, “Sra.”, “Dr.”, “Srita.”)
• given-name: Nombre de pila
• additional-name: Segundo nombre
• family-name: Apellido
• honorific-suffix: Sufijo (Ejemplos: “Hijo”, “Señor”, “II”)
• nickname: Apodo
• email: Correo electrónico
• username: Nombre de usuario
• new-password: Nueva contraseña. Puede ser usado al crear una cuenta o cambiar contraseña
• current-password: Contraseña actual
• organization-title: Título de organización (Ejemplos: “Ingeniero”, “Gerente”, “CEO”)
• organization: Organización
• street-address: Calle (en dirección)
• address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1: Valores de dirección
• country: País
• country-name: Nombre del país
• postal-code: Código postal
• cc-name: Nombre completo en pasarela de pago
• cc-given-name: Nombre de pila en pasarela de pago
• cc-additional-name: Segundo nombre en pasarela de pago
• cc-family-name: Apellido en pasarela de pago
• cc-number: Código de identificación en pasarela de pago (por ejemplo, el número de tarjeta de crédito)
• cc-exp: Fecha de expiración en pasarela de pago
• cc-exp-month: Mes de expiración en pasarela de pago
• cc-exp-year: Año de expiración en pasarela de pago
• cc-csc: Código de seguridad en pasarela de pago
• cc-type: Franquicia en pasarela de pago (por ejemplo, Visa)
• transaction-currency: Tipo de moneda de la transacción
• transaction-amount: Monto de la transacción
• language: Idioma preferido, etiqueta BCP 47 válida
• bday: Fecha de cumpleaños
• bday-day: Día de cumpleaños
• bday-month: Mes de cumpleaños
• bday-year: Año de cumpleaños
• sex: Sexo
• tel: Teléfono
• url: Dirección web
• photo: Fotografía

Conclusiones

Desarrolladores y desarrolladoras web en todo el mundo deben fijarse en los pequeños detalles para facilitar el diligenciamiento de formularios en Internet. No hacerlo puede significar un motivo de abandono o de rechazo a la hora de ingresar la información que necesitamos.

El navegador ayuda captando y guardando información, pero es tarea del equipo de desarrollo extraerla y utilizarla. Esta no funciona por sí sola.

A través del atributo autocomplete de HTML podemos obtener información captada y almacenada a través del navegador web.