Durante los últimos meses HTML 5 está en boca de todos. Se ha generando gran expectativa alrededor de un sin número de tecnologías que nos trae el nuevo lenguaje de la web, no solo por parte de los desarrolladores, sino también de usuarios, debido a que las nuevas especificaciones del HTML mejoran sensiblemente la experiencia de la navegación.

Con HTML5 se pretende facilitar el desarrollo aplicaciones web, las cuales siguen unos parámetros de compatibilidad, tanto usuarios de ordenadores de escritorio, como para los que usan o navegan a través desde un dispositivo móvil. En este artículo vamos a tratar una de esas utilidades que tienen como objetivo mejorar las capacidades de las aplicaciones web. Se trata de los nuevos elementos para formularios HTML.

Los formularios en HTML5 se extienden para dar respuesta a diversas necesidades que se habían detectado en el pasado y en concreto con la llegada de los dispositivos de movilidad. Smartphones, tablets, etc. ganan cada día más aficionados, debido a su practicidad y portabilidad. Hoy estos dispositivos tienen gran potencia, a nivel de hardware y software, y  ante estos nuevos avances la web debía responder con algunas herramientas para mejorar la usabilidad, en este caso de los formularios HTML clásicos.

Con las nuevas especificaciones del lenguaje de la web, se va mejorando en gran medida la experiencia de navegación e interacción del usuarios. Con el uso de dispositivos móviles táctiles, no se cuenta con un teclado físico, por eso las aplicaciones y sistemas operativos implementan lo que se llama el teclado virtual, que le permita al usuario realizar la entrada  de texto de una forma similar a la que se utiliza en los ordenadores de escritorio.

A lo largo de este articulo y algunos otros que vendrán a futuro, estaremos hablando y viendo de primera mano todas las bondades con las que cuentan los formularios web. En algunos casos se trata de elementos nuevos para los formularios, en otros casos simplemente se reforman elementos existentes para ofrecer alguna ventaja. En general al desarrollador le caen como anillo al dedo, pues permiten ahorrarse diversos trabajos que teníamos que realizar con algunas tecnologías auxiliares como javascipt.

Los nuevos elementos o etiquetas con las que podemos contar en un formulario HTML5

En esta sección veremos cuáles son los cinco nuevos elementos que podemos integrar dentro de cualquier formulario web. Con estos nuevos elementos obtenemos mayor interactividad en nuestras aplicaciones web, realizando tareas que normalmente se llevaban a cabo con ayuda de códigos Javascript un tanto complejos. Ahora, con las nuevas especificaciones de HTML5, es posible realizar las mismas tareas, con la inmensa ventaja de usar etiquetas nativas, que generan campos destinados a algunos trabajos en particular, evitándonos usar elementos clásicos a los que asignar funcionalidades con programación.

Debemos aclarar que algunos elementos, de los que se han incorporados en las nuevas especificaciones de HTML5, pueden parecer muy poco practicos. En ocasiones puede que se difícil encontrarle una utilidad dentro de nuestras aplicaciones web, sin embargo, mencionaremos los cinco nuevos elementos aunque no vayamos a trabajar con todos en esta serie de artículos sobre los formularios y sus nuevas herramientas y elementos.

Los nuevos elementos son los siguientes:

• meter
• progress
• detalist
• keygen
• output

Algunos detalles sobre los cinco nuevos elementos de los formularios

Como hemos podido ver anteriormente son cinco nuevas etiquetas, con las que podemos contar en los formularios web. A continuación vamos a hacer mención de cada una, además de los posibles usos que podemos dar en nuestras aplicaciones web, con el propósito de que todos ustedes se hagan una idea sobre lo que podemos lograr con estas nuevas etiquetas.

Etiqueta METER:
Esta nueva etiqueta  se usa para representar escalas de medidas conocidas, de ahí su nombre: Meter, el cual tiene relación directa con medida. Se puede emplear para representar escalas de medición conocidas como longitud, masa, peso, entre otras.

Etiqueta PROGRESS:
Con esta etiqueta no hay que hacer mayor explicación, pues como su nombre lo indica, se usa para crear barras de progreso. Podemos emplearlas o usarlas en procesos de larga duración, como la descarga de archivos, para indicar a cualquier usuario de nuestra aplicación el progreso de la operación que se está realizando.

Elemento DATALIST:
Es una extensión que sirve para crear campos de autocompletado. Sirve para especificar una lista de datos u opciones que se pueden utilizar para sugerir el autocompletado de elementos como INPUT. Por tanto, para utilizar un DATALIST, tenemos que combinar ese elemento con otros elementos de formulario al que le colocamos atributos nuevos para asociar el DATALIST para hacer el autocompletado.

Etiqueta KEYGEN:
Usada para generar pares de claves, clave pública y privada. Al enviar el formulario al servidor por cualquiera de los métodos HTTP, en el cliente se guarda una clave privada la clave pública se empaqueta y se envía al servidor.

Etiqueta o elemento OUTPUT:
Muestra el resultado de un cálculo matemático, su uso básico puede ser tan básico como el de mostrar una simple suma de dos números.

De momento, dejamos por aquí este listado de nuevos elementos de formulario, citando a los lectores a un próximo articulo, donde veremos el uso de algunos de estos nuevos elementos.