Buenas, hoy voy a mostrar cuáles son los elementos que se han incorporado en la última versión de html5. En primer lugar aclaro que todo lo que voy a probar lo haré con la última versión de Google Chrome hasta la fecha, por tanto si tenés algún navegador medio viejo sería bueno que lo actualices.
Realmente no sé el comportamiento de todos los navegadores y sus distintas versiones con los nuevos elementos de formulario, pero lo único que puedo decirte es que uno de los que mejor soportan las nuevas etiquetases Opera, desde acá lo podés bajar. Pero cómo dije antes, mientras estoy escribiendo esto pruebo todo desde Chrome.
Primero que nada, no voy a explicar nada referido con las validaciones de formulario en html5, ya que hice un posteo antes que si querés podés ver pinchar aquí.
Comencemos…
number
Seguramente éste fue uno de los más esperados. Este campo permite agregar datos numéricos, incluso se le puede especificar un rango indicándole el valor mínimo y el valor máximo. Probemos:
<input type="number" min="0" max="10" value="0" />
range
Este elemento está como dicen los españoles: «de p… madre», tiene la misma lógica de number, pero con una interfaz novedosa para lo que es la web.:
<input type="range" min="0" max="10" value="0" />
Hoy en día ingresar datos de correos electrónicos es muy común, de hecho siempre lo fue. Los creados de html5 pensaron en que ya era hora de agregar un input que permita ingresar emails y evitar esa odiosa validación. Si le agregamos la propiedad required al momento de pulsar el botón submit hará una validación. Pero eso lo mostraré al final de este posteo:
<input type="email" />
tel
Para números telefónicos. Realmente no me parece tan wow esté elemento, pero es uno de los nuevos:
<input type="tel" />
date, time, datetime, datetime-local, month, week
Relacionados con valores de fecha y tiempo. Si los estás probando en una de las últimas versiones de Chrome u Opera, verás un hermoso calendario al mejor estilo jquery.
Date es para fechas, que incluyen días, mes y año y time para las horas. También podés tener ambas en una con datetime o datetime-local para tu fecha local. Month para elegir un mes específico y week una semana de un año:
<input type="date" /> <br /> <input type="time" /> <br /> <input type="datetime" /> <br /> <input type="datetime-local" /> <br /> <input type="month" /> <br /> <input type="week" />
search
Los campos de búsqueda también son necesarios, así que en esta última versión de html5 no podían quedar afuera. Desde mi Chrome no lo estoy viendo bien, pero Opera muestra un hermoso botón que limpia la búsqueda:
<input type="search" />
color
Este elemento es ESPECTACULAR!!! Permite seleccionar un color con su respectivo código cromático:
<input type="color" />
A continuación armaré un formulario con algunos de estos componentes, sería mejor si lo probás lo hagas en la última versión de Chrome o mejor aun en Opera.
Saludos!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#tabla {border-collapse: collapse; border: solid 1px #000;}
#tabla td {border-bottom: solid 1px #000; padding: 5px;}
</style>
</head>
<body>
<form action="" method="post">
<table id="tabla">
<tr>
<td> <label for="numerico"> Numérico </label> </td>
<td> <input type="number" name="numerico" id="numerico" min="1" max="100" value="1" required="required" /> </td>
</tr>
<tr>
<td> <label for="rango"> Rango </label> </td>
<td> <input type="range" name="rango" id="rango" min="1" max="10" value="1" /> </td>
</tr>
<tr>
<td> <label for="correo"> Correo </label> </td>
<td> <input type="email" name="correo" id="correo" required="required" /> </td>
</tr>
<tr>
<td> <label for="fecha"> Fecha </label> </td>
<td> <input type="date" name="fecha" id="fecha" required="required" /> </td>
</tr>
<tr>
<td> <label for="hora"> Hora </label> </td>
<td> <input type="time" name="hora" id="hora" required="required" /> </td>
</tr>
<tr>
<td> <label for="color"> Color </label> </td>
<td> <input type="color" name="color" id="color" /> </td>
</tr>
<tr>
<td colspan="2"> <input type="submit" value="Enviar" /> </td>
</tr>
</table>
</form>
</body>
</html>