Cómo se usa el elemento meter en HTML5

Con HTML5 son muchas las nuevas etiquetas que se definieron, muchas de las cuales creo que la gran mayoría están dedicadas específicamente a la semántica, dando lugar a que las que más llaman la atención son las de los formularios.

La etiqueta <meter> nos sirve para especificar una barra de resultados sobre una encuesta. Podría no ser para una encuesta pero su propósito inicial es ese, ser un elemento que reemplace el uso de etiquetas como el div para simular este objeto. En este tutorial vamos a aprender a usar el elemento meter en HTML5 con un ejemplo muy práctico y sencillo, así que se los dejo a continuación.

Nivel de dificultad: principiantes
Demo del tutorial

Notas

Desgraciadamente a pesar de que es un estándar de HTML5 todavía no es implementado por todos los navegadores; sólo Opera y Google Chrome soporta esta etiqueta. Otro dato interesante es que así como con la etiqueta de video, podemos especificar algún texto para los navegadores que no soportan la etiqueta.

HTML

La estructura básica de <meter> es la siguiente:

donde tenemos 3 atributos importantes:

• max: el valor máximo que puede contener
• min: el valor mínimo que puede contener
• value: el valor que se muestra actualmente

Entonces, para poder hacer nuestra encuesta necesitamos lo siguiente:

Es un formulario de radio buttons(aquí vemos como validarlos) y lo que hacemos es tener ese formulario y luego abajo una capa con 4 meters para que cada uno represente los votos de cada opción.

jQuery

Para este tutorial lo que vamos a hacer es simular hacer una encuesta, por lo que los valores no se van a almacenar, tendremos que votar varias veces para poder ver el resultado final.

Para iniciar necesitamos la variable total que va a llevar la cuenta del total para obtener buena precisión.

Lo que hacemos es primero validar que esté alguna opción seleccionada, de lo contrario le mostramos un mensaje (si no entiendes lo que hago en esa parte ve este tutorial). Pero si escoge una opción entonces la variable opcion va a contener el meter correspondiente.

Verán, cada meter tiene un id, y el value de cada radio es el mismo que el id, de tal forma que así podemos saber cuál vamos a llenar de votos, de otra forma no serviría el ejemplo. Así que como jQuery es tan bueno basta con añadir un “#” para completar la forma de indicar el meter.

Obtenemos entonces el valor que tiene el meter, le sumamos 1 y le sumamos 1 a total, puesto que cada vez que se vota, independientemente de la opción total debe tener la cuenta del total de votos.

Después, le colocamos a todos los meter el máximo valor, que es total. El fadeIn() es sólo para hacer aparecer la capa que contiene los meters, pero después la última sentencia es importante, porque ahora debemos actualizar el valor actual de la barra correspondiente, así que le modificamos el value con nuestra variable valor.

Si hicimos esto ya deberíamos tener listo nuestra encuesta lista, y como les decía, se tiene que llenar a mano voto por voto, pero si tuviéramos PHP o Servlets podríamos hacerlo más real.