Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

Descubre los nuevos tipos de input de HTML5

Algo habitual en la web son los formularios, que han pasado de simples cajas bancas a multitud de input de distintos tipos, como inputs que nos permiten validad emails, establecer fechas (con ayuda de un calendario emergente), seleccionar colores o usar número fácilmente.

Por eso veo esencial ver qué tipos nuevos de input existen y como usarlos. Ya que ayudarán a los usuarios de nuestra web a introducir de forma más simple y precisa los datos necesarios.

El gran incremento en los tipos de inputs se encuentra en los tipos de fechas que podemos establecer, discriminando por meses, días, semanas u hora.
Otro input de especial relevancia es el que nos permite establecer rangos y las listas en los propios inputs, que nos permiten usar las antiguas listas desplegables de una forma más elegante, como veremos seguramente.
Aunque esto tiene una contrapartida, y es que el soporte completo solo lo tiene Chrome, pero la mayoría de los navegadores modernos soportan los básicos. También tenemos que tener otro factor en cuenta, y es que los navegadores móviles interpretan algunos de ellos y muestran, por ejemplo, teclados numéricos.

Fechas

Los input que nos permiten establecer fechas son los menos soportados, pero los más útiles, por lo que esperemos que el soporte aumente progresivamente.

Fecha


	
			<input type="date">

Fecha y hora


	
			<input type="datetime"> <!-- Con menor soporte -->
			<input type="datetime-local">

Hora


	
			<input type="time">

Semana


	
			<input type="week">

Numéricos

Estos input tienen soporte de gran parte de los navegadores, incluido móviles.

Número


	
			<input type="number">

Rango


	
			<input type="range" min="0" max="100">

Datos

En este caso nos encontramos con distintos tipos de datos y con la ventaja de los móviles, ya que algunos de estos input son reconocidos por los teclados de los móviles y se adaptan a las necesidades de cada caso (exceptuando el "color"). Otra utilidad es la de validar con mayor facilidad.

Color


	
			<input type="color">

Teléfono


	
			<input type="tel">

Dirección de email


	
			<input type="email">

Dirección URL


	
			<input type="url">

Listas

Una lista de búsqueda es un input que tiene asociado una lista con distintos parámetros, que se mostrarán para rellenar nuestro input. Tiene soporte por la mayoría de navegadores.


	
			<input type="text" list="lista">
			<datalist id="lista">
		
				<option value="Rojo"></option>
				<option value="Verde"></option>
				<option value="Azul"></option>
				<option value="Lila"></option>
		
			</datalist>

Resumen

El soporte no es completo por parte de todos los navegadores, pero su uso es muy recomendable, ya que en el caso de no poderse usar el input con el formato específico podremos disponer igualmente de un input de tipo texto.

En el caso de los navegadores que lo soportan generan una alerta cuando se intenta enviar un formulario con datos que no cumplen con la definición del propio input, lo que nos evita tener que crear un sistema propio de verificación.
También tenemos que tener en cuenta los dispositivos móviles, que cada vez son más los que incorporan la personalización del teclado según el tipo de input.

Comentarios