[HTML5] Nuevos tipos de input

Posted on Actualizado enn


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:

<input type="date" />

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!

2 comentarios sobre “[HTML5] Nuevos tipos de input

    […] [HTML5] Nuevos tipos de input […]

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:04

    […] [HTML5] Nuevos tipos de input […]

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 )

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 )

Google+ photo

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

Conectando a %s