Elemento meter

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento meter representa una medida dentro de un rango conocido. Este elemento, nuevo en HTML5, puede ser útil para representar medidas en diferentes situaciones, como uso de disco, memoria o ancho de banda, los resultados de un encuesta, la cantidad recaudada en una colecta, el número de registros coincidentes en una consulta, etc.

El elemento meter soporta seis atributos especiales diseñados para agregar información acerca de los valores que éste contiene. Los atributos min y max representan los límites inferior y superior del rango. Los atributos low y high ayudarán a los autores a definir segmentos (desde los márgenes) que contendrán valores considerados como bajos y altos respectivamente, mientras que optimal indicará cuál es el valor óptimo en esta medida. Por último, el atributo value representa el valor tomado por esta medida.

Los autores no deben confudir a este elemento con progress. A diferencia de meter, el elemento progress mide únicamente la completitud de una tarea.

Si los atributos min y max no son declarados en este control, los límites de esta medida serán los predeterminados 0 (límite inferior) y 1 (límite superior).

Aunque no existe una forma explícita de especificar las unidades en el elemento meter, éstas pueden proveerse en el atributo title en texto de forma libre.

El soporte provisto por los navegadores para meter es incompleto. Los atutores pueden tener que recurrir a programas y/u hojas de estilo para lograr los mismo efectos consistentemente.

Ejemplos

En nuestro primer ejemplo, mostraremos un control meter representando el uso del disco, con un valor de 45 sobre 80. El atributo max será apropiadamente establecido en 80, mientras que el atributo min será omitido, sabiendo que tomará el valor predeterminado de 0. El atributo value será esteblecido en 45 y representará, en este caso, la cantidad de espacio en disco utilizada.

<p>Uso del disco (GB): <meter max="80" value="45"></meter></p>

Uso del disco (GB):

En nuestro segundo ejempo agregaremos contenido al elemento meter, el cual será mostrado en aquellos navegadores que no soportan al elemento, haciendo su uso más compatible con navegadores antiguos. Asimismo, incluiremos las unidades de medida en que se expresan los valores en el atributo title.

<p>Uso de la memoria RAM: <meter max="2048" value="547" title="Megabytes">547/2048</meter></p>

Uso de la memoria RAM: 547/2048

Ahora, definiremos un rango con valores mínimo y máximo (atribtuos min y max), áreas bajas y altas (atributos low y high), y un valor óptimo (atribtuo optimal). Adicionalmente estableceremos el valor de esta medida (atributo value).

Los navegadores pueden no proveer una representación para los atributos low, high y optimum. Los autores pueden usar hojas de estilo para hacer que estos valores sean visibles.

<p>Tráfico generado: <meter min="100" max="5000" low="1000" high="4100" optimum="3500" value="2154"></meter></p>

Tráfico generado:

Atributos

Atributos específicos

value

Un valor numérico que indica el nivel actual de esta medida.

Este atributo debe contener un número entre los valores de los atributo min y max. Cuando estos atributos están ausentes, los límites para el rango se establecen en 0 y 1.

Ejemplo

<p>Probabilidad de lluvia: <meter value="0.85"></meter></p>

Probabilidad de lluvia:

min

El límite inferior del rango. Este valor establecerá el mínimo número válido que podrá tomar el atributo value.

Cuando este atributo no está presente en el control, el límite inferior para la barra meter toma automáticamente el valor predeterminado de 0.

Ejemplo

<p>Votos: <meter min="12" max="134" value="45"></meter></p>

Votos:

max

El límite superior del rango. Este valor establecerá el máximo número válido que podrá tomar el atributo value.

Cuando este atributo no está presente en el control, el límite siperior para la barra meter toma automáticamente el valor predeterminado de 1.

Ejemplo

<p>Moléculas de agua encontradas: <meter max="750300" value="124500"></meter></p>

Moléculas de agua encontradas:

low

Un número en el rango, que define un área de valores bajos. Todos los valores que caigan en el segmento entre el límite inferior y este valor serán considerados valores bajos en esta medida.

Este valor debe estar dentro del rango (opcionalmente definido por los atributos min y max) y ser menor que el atributo high (si está presente).

Los navegadores pueden no proveer una representación para este atributo. Los autores pueden usar hojas de estilo para hacer que este valor sea visible.

Ejemplo

<p>Ventas este mes: <meter max="500" low="20" value="55"></meter></p>

Ventas este mes:

high

Un número en el rango, que define un área de valores altos. Todos los valores que caigan en el segmento entre el límite superior y este valor serán considerados valores altos en esta medida.

Este valor debe estar dentro del rango (opcionalmente definido por los atributos min y max) y ser mayor que el atributo low (si está presente).

Los navegadores pueden no proveer una representación para este atributo. Los autores pueden usar hojas de estilo para hacer que este valor sea visible.

Ejemplo

<p>"Me gusta" esta semana: <meter max="100" high="80" value="33"></meter></p>

"Me gusta" esta semana:

optimum

Un número en el rango, considerado como el valor óptimo de esta medida.

Los navegadores pueden no proveer una representación para este atributo. Los autores pueden usar hojas de estilo para hacer que este valor sea visible.

Ejemplo

<p>Voltaje: <meter min="90" max="130" optimum="110" value="104.5"></meter></p>

Voltaje:

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.