Nuevos elementos de Formularios - HTML5 Form - tipos de input

A la hora de hacer un formulario de contacto HTML (HTML5 Form), sus elementos nos van a proporcionar varias ventajas. Una de ellas es la posibilidad de hacer validaciones de forma nativa y otra muy interesante es la de mejorar la experiencia de cara al diseño adaptable. Nos vamos a centrar en esas ventajas.

Estos formularios nos proporcionan los siguientes tipos de inputs:

<input type="search">
<input type="email">
<input type="url">
<input type="tel">
<input type="number">
<input type="range">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="color">

La ventaja de usar estos HTML5 Forms de cara al diseño responsive, es que nos va a mostrar teclados acordes al tipo de campo elegido.

En la imagen de abajo hemos marcado en rojo las variaciones de teclado según el tipo de input:



Como podemos observar, un <input type="email" />  nos va a mostrar un teclado móvil con el signo @ y otra tecla con .com

Si queréis enredar un poco con los tipos de input, os hemos dejado un ejemplo HTML5 en nuestra sección de codepen.

See the Pen KwBZGw by Pedro Marín (@pedromarin) on CodePen.