Elemento meter en HTML

El elemento html meter representa un valor numérico dentro de un rango determinado o un valor fraccionario. Un ejemplo simple del uso del elemento <meter> para mostrar la temperatura a la que se debe configurar el horno para cocinar un cierto tipo de alimento.

Tenga en cuenta el uso de la propiedad min para especificar el valor más bajo (la temperatura más baja disponible en el horno), la propiedad max para especifique el valor más grande (la temperatura más alta a la que se puede calentar el horno) y la propiedad value para especificar la temperatura requerida:

< p > Caliente el horno a
   < meter  min = "200"  max = "500"  value = "350" > 350 ° C </ meter > . </ p >

Un ejemplo del uso del elemento <meter> para representar la temperatura del cuerpo humano (tenga en cuenta el uso de la propiedad optimum):

< p > La temperatura corporal del paciente es
   < meter  min = "32"  low = "36,5"   high = "37,5"  max = "41"  optimum = "37"  value = "36,8" > 36,8 &deg; C 
   </ meter > . 
</ p >

Etiqueta html meter

Clasificaciones de contenido	Elemento organizativo, elemento ordinario.
Contenido permitido	Contenido regular, pero el elemento no está permitido `<meter>` dentro.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte contenido normal.
Interfaz DOMO	`HTMLMeterElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
6.0	16,0	Soportado	5.2	11,0

Este elemento se agregó en HTML5 y no estaba allí antes.

Características

En este elemento html meter se pueden utilizar propiedades globales.

`value`

El valor numérico actual, y debe estar entre los valores mínimo y máximo (que están especificados por los dos atributos min y max secuencialmente y en orden) si se especifica.

Si no se especifica ningún valor para esta propiedad o el valor no es válido, se devolverá el valor 0. Si se asigna un valor pero no está dentro del rango especificado por las propiedades miny max, entonces el valor será igual al extremo más cercano de la campo.

NOTA: ¿Cuál es el área del valor de la propiedad que no estaba value entre 0 y 1? Debe definir el dominio mediante el uso de dos especiales min y max, presumiblemente para ser el valor de la propiedad value entre ellos.

`min`

El valor mínimo del campo, que debe ser menor que el valor máximo (definido por la propiedad max) si se especifica. Si no se especifica ningún valor para esta propiedad, el valor predeterminado es 0.

`max`

El valor máximo del rango, que debe ser mayor que el valor mínimo (definido por la propiedad min) si se especifica. Si no se especifica ningún valor para esta propiedad, el valor predeterminado es 1.

`low`

El valor más grande del rango inferior y debe ser mayor que el valor mínimo (definido por la propiedad min), menor que el valor más pequeño del rango de valor alto y menor que el valor máximo (que están definidos por las propiedades high y max respectivamente ).

Si no se especifica ningún valor para esta propiedad, el valor predeterminado del valor más grande del rango de valores bajos ( low) es igual al valor mínimo del rango.

`high`

El valor más pequeño del rango superior, y debe ser menor que el valor máximo (definido por la propiedad max), mayor que el valor más grande del rango de valor bajo y mayor que el valor mínimo (que son especificados por las propiedades low y min secuencialmente y en orden).

Si no se especifica ningún valor para esta propiedad, el valor predeterminado del valor más pequeño del rango de valores altos ( high) es igual al valor máximo del rango.

`optimum`

Esta propiedad indica el dominio ideal y debe estar dentro del dominio (definido por las dos propiedades min y max). Cuando utilice esta propiedad con las dos propiedades low, high le indicará cuándo se prefiere el rango.

Por ejemplo, si el valor está entre el rango más bajo y el valor más grande del rango de valores bajos (es decir, min y low), entonces el rango entre los dos valores min y low se considera superior.

`form`

Esta propiedad asocia este elemento con un elemento al <form> que pertenece ese elemento . Por ejemplo, cuando usamos el elemento <meter> para mostrar un campo que responde a un elemento <input> de tipo number.

Esta propiedad sólo debe usarse si el elemento <meter> es hijo de un formulario y se puede omitir si el elemento <meter> es hijo de un elemento <from>.

Formato predeterminado

La mayoría de los navegadores renderizan el elemento <meter> estableciendo la propiedad display en inline-block, estableciendo el valor box-sizing igual border-box, especificando alto ( height) y ancho ( width), y usando alineación vertical ( vertical-align):

meter {
  box-sizing: border-box;
  display: inline-block;
  height: 1em;
  width: 5em;
  vertical-align: -0.2em;
}