Diseño de formularios con autocompletar y placeholder

Cualquier site que quiera hacer negocio online utiliza formularios para alcanzar objetivos, como es completar una transacción en una tienda online o registrarse en un sitio de noticias.

Para los usuarios, rellenar formularios online implica tener que introducir de forma repetitiva información que ya ha introducido previamente en otro formulario y que en la mayoría de las ocasiones con el mismo fin, dejar sus datos personales para completar una acción que le interesa al propio usuario. Ejemplos de estos datos son el correo electrónico, número de teléfono o dirección en distintos.

Además de resultar aburrida, esta tarea se presta a cometer errores, lo que puede provocar que muchos usuarios abandonen definitivamente el formulario. Si a esto añadimos, que actualmente los usuarios tienden a utilizar más sus dispositivos móviles que sus portátiles u ordenadores para navegar por Internet, resulta muy importante disponer de formularios que se puedan rellenar de manera rápida y sencilla.

Es muy importante que los usuarios puedan consultar sitios web de forma rápida y fácil desde sus dispositivos móviles.

¿Cómo funciona el atributo autompletar en los formularios?

Desde hace tres años, Chrome es totalmente compatible con el atributo «Autocompletar» para los campos de formularios con el objetivo de facilitar y agilizar la forma de rellenar formularios. Actualmente, sigue las especificaciones vigentes del estándar WHATWG de HTML.

Los webmasters y desarrolladores web pueden etiquetar campos de elementos de entrada con tipos de datos comunes, como «name» o «street-address», sin tener que cambiar la interfaz de usuario ni el backend, con esto los webmasters aumentan la velocidad con la que se rellenan los formularios de sus sitios marcando los formularios con este atributo.

Atributos autocomplete y placeholder en formularios

Por ejemplo, un campo de dirección de correo electrónico de un formulario marcado de modo que permita la función de completado automático tendría el siguiente aspecto (puedes ver el formulario de ejemplo completo):

<input type=»email» name=»customerEmail» autocomplete=»email»/>

Otros ejemplos:

<label for="frmNameA">Name</label>
    <input type="text" name="name" id="frmNameA"
      placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
    <input type="email" name="email" id="frmEmailA"
      placeholder="name@example.com" required autocomplete="email">

<label for="frmEmailC">Confirm Email</label>
    <input type="email" name="emailC" id="frmEmailC"
      placeholder="name@example.com" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
    <input type="tel" name="phone" id="frmPhoneNumA"
      placeholder="+1-555-555-1212" required autocomplete="tel">

Para obtener más información, puedes consultar nuestras especificaciones sobre Entradas de etiquetas y de nombres en Web Fundamentals.

Enlaces de interés

• Foro de ayuda para webmasters
• El Blog para Webmasters: Post «Ayudar a los usuarios a rellenar formularios online«

Información de Mathieu Perreault, Chrome Software Engineer, y Zineb Ait Bahajji, Webmaster Trends Analyst. Publicado por Javier Pérez equipo de calidad de búsqueda en El Blog para Webmasters.