Elemento meter en HTML

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 contenidoElemento organizativo, elemento ordinario.
Contenido permitidoContenido regular, pero el elemento no está permitido <meter> dentro.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido normal.
Interfaz DOMOHTMLMeterElement

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
6.016,0Soportado5.211,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 minmax 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 minmax, 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 minmax, 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 highmax 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 lowmin 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 minmax). Cuando utilice esta propiedad con las dos propiedades lowhigh 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, minlow), entonces el rango entre los dos valores minlow 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;
}