Etiqueta meter HTML5: Representar valores mediante barras gráficas

Vamos a repasar la nueva etiqueta meter HTML5, con esta etiqueta se pretende representar mediante una barra un rango de valores. No lo confundáis como una barra de progreso.

2 elementos parecidos son:

• El input range: Sirve para seleccionar un valor dentro de un rango.
• La etiqueta progress: Representa el progreso de una tarea o acción.

Os dejo una imagen de ejemplo de la etiqueta meter:

Sintaxis de la etiqueta meter HTML5

Vamos a ver su sintaxis extraída de su web oficial:

He puesto una sintaxis sencilla, con un valor por defecto y valores mínimo y máximo. Los atributos que se pueden usar en esta etiqueta para sacarle el máximo provecho son:

• value: Valor actual del elemento, debe ser mayor que el atributo min y menor que el max.
• min: Valor mínimo del elemento, si se omite el valor es 0. Por lo tanto debe ser menor que el atributo max.
• max: Valor máximo del elemento, si se omite el valor es 1. Debe ser mayor que el atributo min.
• low: Límite superior del valor mínimo.
• high: Límite interior del valor máximo.
• optimum: El valor más adecuado de todo el rango. Debe estar entre el valor min y max, en caso de tener definidos los atributos high y low también deberá estar entre ambos.

Las barras que representan el valor son de color verde por defecto, pero si el dato se encuentra entre los valores min y low o high y max serán de color amarillo.

Jerarquía de los atributos de la etiqueta meter HTML5

Quizás con la exlicación superior de los atributos no os hayáis hecho una idea clara, os he preparado este código de ejemplo para ver el orden de los atributos:

Los valores de los atributos deben obedecer este orden superior.

Ejemplos de la etiqueta meter HTML5

Vamos con varios ejemplos de esta nueva etiqueta HTML5:

Os explico cada uno de los 4 bloques de código:

• En el primer bloque tenemos unas llamadas sencillas, con valor actual y valor mínimo y máximo. Las barras son de color verde.
• En el segundo bloque definimos el valor optimum, ninguna variación en las barras respecto al primer bloque.
• En el tercer bloque definimos los atributos high y low, si el valor está entre los valores min y low o high y max la barra será amarilla.
• En cuarto bloque de código modificamos mediante CSS el tamaño de la etiqueta. Mediante las hojas de estilo también podemos modificar el color de la barra cambiando el background.

Clases CSS propias de meter HTML5

Estas son las 3 clases principales:

• webkit-meter-bar: Define el color principal de la barra.
• webkit-meter-optimum-value: Por defecto es verde pero se puede personalizar cuando el valor se encuentra dentro de la jerarquía low <= value <= high.
• webkit-meter-suboptimum-value: Por defecto es amarillo pero se puede personalizar cuando el valor NO se encuentra dentro de la jerarquía low <= value <= high.

Ejemplo código CSS:

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.