¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Mejora la usabilidad de tus formularios con HTML5

Estoy seguro de que quizá, esta temática sea una de las más repetidas hasta la fecha… ¿o no?

La verdad es que me he animado a escribir este artículo, porque a día de hoy aun veo mucha gente del sector que no aprovecha los nuevos tipos de campo de HTML5. No os voy a hablar de adaptar una web a un móvil (eso es harina de otro costal), si no de cómo aprovecharnos de los nuevos atributos para mejorar la experiencia del usuario.

Si has usado alguna vez un dispositivo portátil (ya sea tablet o teléfono) y has rellenado un formulario web, te habrás fijado de que a veces, el teclado cambia para mostrarnos el símbolo de la @, o los números para introducir un número de teléfono. La palabra clave en la frase anterior es a veces.

Mirad este ejemplo de reserva de un restaurante:

¡Oh no!

HTML5 añade nuevos tipos de elementos input de los cuales nos podemos aprovechar.

Ventajas

Estos campos, tienen varias mejoras que detallo brevemente

  • Mayor semántica: Un campo que es de tipo text, deja lugar a la imaginación lo que va a contener. Un campo del tipo email no.
  • Soporte en dispositivos táctiles: Habitualmente (iOS y Android) los teclados se adaptan para facilitar al usuario la introducción de datos.
  • Ayuda al autorelleno: Si usáis Chrome, a veces os habréis fijado que os auto-rellena información que tiene almacenada sobre nosotros como Dirección, Nombre y Apellidos, teléfono o correo electrónico. Estos campos asisten al navegador en estas lides.
  • Reglas de validación: Si el navegador lo implementa (y suele hacerlo) valida que un campo email por ejemplo, tenga una dirección bien formada de correo electrónico. (algo @ dominio . com )

¿Qué desventaja tienen?

¡Ninguna! Lo puedo decir más alto pero creo que no más claro… Los navegadores que no lo implementan aun siguen pensando que son de tipo “texto” por lo que no hay nada que te impida empezar a utilizarlo desde ayer.

Vamos a dar un breve repaso  por los diferentes campos, cómo ponerlos y cómo se ven en un iPhone con iOS 5.1.1.

Input del tipo date
Input del tipo datetime
Input del tipo email
Input del tipo month
Input del tipo number
Input del tipo tel
Input del tipo time

De izquierda a derecha y de arriba a abajo, estos son los inputs:

<input type="time">  
<input type="tel">  
<input type="number">  
<input type="month">  
<input type="email">  
<input type="datetime">  
<input type="date">  

Como ves, no tienes excusa ninguna para no utilizar estos campos a partir de hoy mismo.

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!