¿Te ayudo a rellenar el formulario?

Cuando incrustamos un mega formulario en nuestra web y tenemos la esperanza de que algún usuario tenga la paciencia de rellenarlo conviene saber que existen algunos “trucos” con los que podemos ayudar a que ocurra el milagro de ver en nuestra base de datos una nueva entrada procedente de nuestro mega formulario.

help

En la mayoría de las ocasiones buscamos ser originales, aunque a veces, no serlo es lo que nos puede convenir. Este último es el caso de cuando nos enfrentamos ante el dilema de darle un valor al atributo name en un control de un formulario.

Por ejemplo cuando queremos pedirle al usuario que teclee su nombre:

<label for="nombre">Nombre:</label>
<input name="nombre" id="nombre" placeholder="Nombre" autocomplete="nombre">

Los usuarios suelen apreciar cuando ven que campos habituales que tienen que rellenar una y otraz vez en varias webs, como nombre, apellido, direcciónemail, teléfono, etc, se rellenan solos, sobre todo lo apreciará cuando esté visualizando la web con un móvil, que es cuando más cuesta escribir. Además reduciremos posibles errores de escritura.

Los navegadores, al reconocer los nombres mas habituales en el atributo name ofrecen una ayuda de autocompletar la entrada basándose en lo que ya hemos rellenado anteriormente. En el ejemplo anterior hemos ayudado incluso más con el atributo autocomplete, el cual, según google, también ayuda.

Una excepción sería la de los formularios de log-in por razones obvias de seguridad. En este caso se recomienda incluir el atributo autocomplete=”off” en el formulario. Y otra excepción es la de hacerlo con el número de la tarjeta de crédito. Si el el usuario ve que se rellena automáticamente puede sospechar cualquier cosa de nosotros…

Así que, salvo con las excepciones indicadas, lo mejor es ser poco original cuando damos valor al atributo name. Incluso conviene echar un vistazo a otras web del mismo sector para incluir los mismos.

Si estamos utilizando HTML5 conviene recordar el uso de datalist (si es que el navegador lo soporta).

<label for="choco-fav">Chocolate favorito:</label>
<input name="chocolate-favorito" id="choco-fav" list="chocolates">
<datalist id="chocolates">
    <option value="negro">
    <option value="blanco">
</datalist>

Puedes probar si funciona aqui.

¿Te ayudo a rellenar el formulario?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s