En el post anterior vimos cuales son las nuevas etiquetas semánticas disponibles en HTML5 (ver post), y en este artículo vamos a revisar que nuevos tipos de input podemos utilizar en HTML5.

Entonces primero voy a listar los tipos nuevos, y luego comentará acerca de cada uno:

· search: para realizar búsquedas

· number: campo para números con spinboxes

· range: slider

· color: para la selección de un color

· tel: para números telefónicos

· url: para direcciones Web

· email: para direcciones de email

· date: para fechas

· month: para meses

· week: para semanas

· time: para horas

· datetime: para fecha y hora

Como se puede observar tenemos 12 nuevos tipos disponibles, pero como todo en la vida tiene un pero acá no será la excepción. Uno de los problemas iniciales a los cuales no enfrentamos cuando trabajamos con HTML5 es el soporte por parte de los exploradores, pero este tema va para otro post.

Así, si por ejemplo queremos trabajar con el tipo date, vamos a escribir:

Y una vez en el browser vamos a tener (imagen tomada de opera):

image

Lo importante a tener en cuenta es que con estos nuevos controles podemos ahorrar mucho código JavaScript, bueno espero les sea de utilidad este artículo, en el siguiente post vamos a ver las nuevas funcionalidades para construir formularios HTML y como nos hacen la vida más fácil.

Les dejo un ejemplo en donde listo todos los nuevos tipos de input.

Descarga el ejemplo!