Aunque los formularios HTML5 ofrecen muchas más funciones que sus predecesores, son igual de fáciles de definir.
De hecho, HTML5 ofrece muchos tipos de campo nuevos. El soporte por parte de los navegadores actuales ya es comparativamente bueno. En cualquier caso, sólo te presentaré aquellos tipos de campo que son prácticos de utilizar.
Selector de color
Puede dar a sus visitantes la opción de seleccionar un color.
Si hace clic en un campo de este tipo, se abrirá el típico selector de color.
Con él se puede seleccionar el color deseado. Dicho selector de color se define mediante <input type="color" />.
Seleccione su color favorito: <input type="color" name="lf" />
Siempre debe asignarse un valor al campo. Si falta o no es válido, se asume automáticamente #000 (es decir, negro).
Fecha y hora
También hay numerosas innovaciones en HTML5, sobre todo en lo que respecta a los tipos de campo para información sobre fecha y hora. Y algunos de estos tipos de campo realmente lo tienen todo. Por ejemplo, piense en los pasos necesarios si desea ofrecer a sus visitantes un campo de selección de fecha. Normalmente, no se puede hacer nada sin JavaScript (o incluso Flash). Gracias a HTML5, esto es ahora mucho más fácil. Todo lo que tiene que hacer es definir un campo de entrada de tipo fecha.
<input type="date" />
El navegador es el único responsable de mostrar e implementar el calendario. Los navegadores deben mostrar un widget correspondiente para mostrar el calendario. En Google Chrome, una aplicación tiene este aspecto:
Se define un calendario por fecha, que los usuarios pueden utilizar para seleccionar la fecha deseada. La fecha se transfiere automáticamente al campo de texto tras la selección.
Con la misma facilidad se puede crear un campo de hora. Para ello se utiliza un campo de tipo Tim.
<input type="Tim" />
El navegador debe utilizar Tim para mostrar los controles de selección de una hora.
Semana funciona de forma similarmente sencilla. Encima se muestra un campo para seleccionar la semana.
<input type="semana" />
También se puede mostrar un campo de mes.
<input type="mes" />
Ambos tipos de campo muestran elementos de control que se pueden utilizar para establecer la información deseada.
Mientras que time y date sólo permiten seleccionar la fecha o la hora, datetime y datetime-local permiten una combinación de ambas variantes.
Con datetime, un campo de fecha y un campo para seleccionar la hora aparecen uno al lado del otro. (Actualmente, datetime sólo es compatible con Safari y Opera).
Ya se ha mencionado que los campos de formulario presentados en esta sección aún no son compatibles con todos los navegadores. Si aún así desea utilizarlos, puede recurrir a las soluciones JavaScript correspondientes. Los principales marcos de JavaScript, como jQuery y Dojo, ofrecen scripts adecuados. Con jQuery UI, esto se vería así:
<!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> /* <![CDATA[ */ $(document).ready(function() { $("#datepicker").datepicker(); }); /* ]]> */ </script> </head> <body> <input type="text" id="datepicker" /> </body> </html>Así vas sobre seguro, aunque el navegador no soporte la fecha clásica.
Campos para números
Con número, se ofrece un campo especialmente diseñado para introducir números.
En el caso más sencillo, la definición de un campo numérico es la siguiente
<input type="número" />
Los números pueden introducirse en estos campos de dos maneras:
- mediante el teclado
- mediante elementos de control
Especificando atributos adicionales, los campos numéricos pueden describirse con mayor detalle. En primer lugar, están los dos atributos min y max, que pueden utilizarse para determinar los rangos de valores de los campos.
- min - el menor valor posible
- max - el valor más alto posible
Sin embargo, estos dos atributos sólo se aplican a los elementos de control del navegador. No pueden utilizarse para influir en las entradas manuales del usuario a través del teclado.
Se pueden asignar números enteros y de coma flotante a ambos atributos.
El atributo step puede utilizarse para especificar el paso que deben respetar los elementos de control del navegador.
<input type="number" min="0" max="8" step="2" />
En este caso, sólo se podrían seleccionar los valores 0, 2, 4, 6 y 8 utilizando los elementos de control del navegador.
Deslizador
Los campos de tipo rango permiten seleccionar un valor dentro de un rango de valores definido.
Los navegadores interpretan el campo rango como un deslizador.
<input type="rango" min="0" max="10" step="2" value="6">
El menor valor posible se especifica mediante el atributo min. max describe el mayor valor posible. Si faltan los dos atributos min y max, los navegadores asumen los dos valores 0 y 100.
La secuencia de pasos puede definirse mediante step.
Creación de campos de búsqueda
search no tiene inicialmente ninguna función. Más bien, este tipo de campo debe considerarse como un complemento del clásico campo de entrada de texto. El propósito de los campos de búsqueda es simplemente distinguirlos visualmente de los simples campos de texto. Por lo general, los navegadores deberían hacerse cargo de la visualización de los campos de búsqueda.
<input type="search" />
Cómo implementen esto en última instancia depende de los fabricantes. Una buena combinación es añadir el atributo de resultados.
<input type="search" results="5" placeholder="Buscar..." />
Results se utiliza para especificar cuántas de las entradas de búsqueda anteriores deben mostrarse en el campo.
Pero cuidado: el atributo results no forma parte de la especificación HTML5.
