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.
Tabla de contenidos
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.
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:
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
).
<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.