Etiqueta meter
La etiqueta meter se utiliza para mostrar
algún valor de forma visualmente atractiva.
La apariencia de la etiqueta es una barra parcial o completamente llena. La barra puede ser verde, amarilla o roja (el color de la barra depende de los valores de los atributos, sobre esto se hablará más adelante):
La etiqueta meter debe usarse, por
ejemplo, en la siguiente situación: desea
mostrar en pantalla el valor actual de la temperatura,
siendo que la temperatura puede variar de 0
a 100. Debe indicar los siguientes
atributos: el atributo value debe indicar
el valor actual de la temperatura, el atributo min
- el valor mínimo posible (en nuestro
caso 0), el atributo max - el valor máximo
posible (en nuestro caso 100).
Dependiendo del valor del atributo value
la barra será pequeña o grande. Si
se indica value con un valor de 10,
la barra será pequeña (ya que 10
está muy cerca del mínimo - cero), mientras que si
se indica el valor 90, la barra será
grande (ya que 90 está cerca del máximo
- 100). Si se indica el valor 100, la
barra ocupará todo el elemento (ya que el valor
alcanzó el máximo).
Si se indica un valor mayor que 100,
la barra igual ocupará todo el elemento.
Si se indica 0 o menos, no habrá
barra visible.
Ejemplo
El valor del atributo value es pequeño:
<meter value="10" min="0" max="100"></meter>
:
Ejemplo
El valor del atributo value es grande:
<meter value="90" min="0" max="100"></meter>
:
Ejemplo
El valor del atributo value es medio:
<meter value="50" min="0" max="100"></meter>
:
Ejemplo
El valor del atributo value es igual al máximo:
<meter value="100" min="0" max="100"></meter>
:
Ejemplo
El valor del atributo value es igual al mínimo:
<meter value="0" min="0" max="100"></meter>
:
Ejemplo
El valor del atributo value es mayor que el máximo:
<meter value="110" min="0" max="100"></meter>
:
Ejemplo
El valor del atributo value es menor que el mínimo:
<meter value="-10" min="0" max="100"></meter>
:
Añadiendo los atributos low y high
En la etiqueta meter hay 2 atributos más:
low y high.
Consideremos su funcionamiento usando el ejemplo de la temperatura.
Recordemos que nuestra temperatura mínima
es 0, y la máxima - 100.
Supongamos ahora que queremos definir los siguientes rangos
- "temperatura fría" de 0 a 20,
"normal" de 20 a 80 y
"caliente" de 80 a 100.
Para definir la temperatura fría, indicaremos
el valor del atributo low como el número 20.
Así, de cero (este es el valor del atributo
min) a 20 (valor del atributo
low) tendremos la zona de valores bajos.
Para definir la temperatura caliente, indicaremos
el valor del atributo high como el número 80.
Así, de 80 (este es el valor
del atributo high) a 100 (valor
del atributo max) tendremos la zona de valores altos
.
La temperatura normal será de 20
(este es el valor del atributo low) a 80
(valor del atributo high). A esta zona
la llamaremos zona de valores normales.
Ahora, dependiendo de en qué zona
caiga el valor del atributo value,
la barra se coloreará en verde o
amarillo. Será verde si cae
en la zona de valores normales, y amarilla
- si está en la zona de valores altos o bajos.
Ejemplo
El valor del atributo value cae en la
zona de valores bajos:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Ejemplo
El valor del atributo value cae en la
zona de valores normales:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Ejemplo
El valor del atributo value cae en la
zona de valores altos:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Añadiendo el atributo optimum
El atributo optimum define el valor
óptimo. Para nuestro ejemplo, la temperatura
óptima podría ser la fría, la normal
o la caliente - a su elección. Supongamos
que usted indica que la temperatura óptima
es la fría. Ahora, dependiendo del valor
del atributo value (es decir, de la temperatura
actual) el color de la barra será verde,
amarillo o rojo.
Si la temperatura actual cae en el área de temperaturas óptimas (y hemos indicado que la óptima es la fría), el color de la barra será verde. Si la temperatura actual cae en el rango adyacente al óptimo (en nuestro caso la temperatura normal), la barra se volverá amarilla. Si la temperatura actual cae en un rango no adyacente al óptimo (en nuestro caso la temperatura caliente), la barra se volverá roja.
De manera análoga ocurrirá todo, si se indica como temperatura óptima la caliente. En este caso, si la temperatura actual cae en el área de temperaturas calientes - la barra será verde, si cae en el área de temperaturas normales - amarilla, si en el área de temperaturas frías - roja.
Si se indica como óptima la temperatura normal, la barra solo podrá ser verde (si la temperatura actual cayó en la normal) o amarilla (si la temperatura actual cayó en un rango adyacente al normal, es decir, caliente o fría).
Para indicar qué rango es el óptimo,
se debe indicar como valor del atributo
optimum cualquier número de ese rango.
En los ejemplos siguientes, el valor del atributo optimum
cae en la zona de valores bajos
(es decir, temperaturas frías).
Ejemplo
El valor del atributo value cae en la
zona de valores bajos:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Ejemplo
El valor del atributo value cae en la
zona de valores normales:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Ejemplo
El valor del atributo value cae en la
zona de valores altos:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
En los ejemplos siguientes, el valor del atributo optimum
cae en la zona de valores altos
(es decir, temperaturas calientes).
Ejemplo
El valor del atributo value cae en la
zona de valores bajos:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Ejemplo
El valor del atributo value cae en la
zona de valores normales:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Ejemplo
El valor del atributo value cae en la
zona de valores altos:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
En los ejemplos siguientes, el valor del atributo optimum
cae en la zona de valores normales
(es decir, temperaturas normales).
Ejemplo
El valor del atributo value cae en la
zona de valores bajos:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Ejemplo
El valor del atributo value cae en la
zona de valores normales:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Ejemplo
El valor del atributo value cae en la
zona de valores altos:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Navegadores antiguos
Los navegadores antiguos no podrán mostrar la etiqueta meter
de forma visualmente atractiva y en su lugar
mostrarán el contenido interno de la etiqueta:
<meter value="10" min="0" max="100">Este texto se verá en navegadores antiguos.</meter>
:
Atributos
El valor de los atributos puede ser un número fraccionario y negativo.
| Atributo | Descripción |
|---|---|
value |
Establece el valor actual. Atributo obligatorio. |
min |
Establece el valor mínimo posible. Valor por defecto: 0. |
max |
Establece el valor máximo posible. Valor por defecto: 1. |
low |
Establece el límite de la zona de valores bajos. Los valores bajos serán desde el número en el atributo
min hasta el número en el atributo low.
|
high |
Establece el límite de la zona de valores altos. Los valores altos serán desde el número en el atributo
high hasta el número en el atributo max.
|
optimum |
Define la zona de valores óptimos. |
Véase también
-
la etiqueta
progress,
que crea una barra de progreso.
