Medidores y barras de progreso

Existen algunos otros controles que, aunque no nos permiten introducir información, pueden ser muy útiles en formularios para presentar información de una forma más visual u ofrecer datos adicionales al usuario. Eso sí, se trata de etiquetas que sin el uso de Javascript sólo podremos realizar funcionalidades muy básicas:

Tipo de botón de control	Etiqueta a utilizar	Ejemplo
Barra de progreso	<progress>
Medidor	<meter>

Barra de progreso

En primer lugar, tenemos una barra de progreso que puede ser útil para colocarla cuando necesitamos que el usuario sepa que debe esperar mientras se realizan otras tareas, o incluso para indicar el progreso de algún proceso o incluso del usuario a través de la página.

La etiqueta <progress> muestra por defecto una barra de progreso «infinita», que se mueve de izquierda a derecha sin parar. Es la funcionalidad que tiene la barra de progreso sin interactividad desde Javascript.

<form name="formulario" method="post" action="/send.php">
  <!-- Barra de progreso -->
  <progress max="100" value="25">
</form>

Mediante el atributo max podemos definir el valor que debe tener la barra de progreso para estar completa y mediante el atributo value el valor actual de la barra de progreso.

Además, utilizando javascript podríamos ir aumentando el valor de la barra de progreso a medida que realizamos procesos, tareas o incluso acciones del usuario.

Medidores

La etiqueta <meter> nos permite la creación de medidores para mostrar el nivel o estado de algún detalle. Este control es muy útil para ciertas tareas donde debemos mostrar información que se puede representar mediante un medidor que traspase ciertos umbrales.

Un ejemplo clásico es el medidor de seguridad de una contraseña, donde puede reflejar de forma gráfica y sencilla si la contraseña tiene un nivel de seguridad bajo, medio o alto, incluso especificando diferentes grados de nivel.

Para ello, tenemos ciertos atributos disponibles en esta etiqueta <meter>:

Atributo	Valor	Descripción
min	valor mínimo	Valor mínimo que puede alcanzar el medidor.
max	valor máximo	Valor máximo que puede alcanzar el medidor.
value	valor actual	Cantidad actual del medidor.
low	umbral bajo	Indica el umbral donde se considera bajo-medio.
high	umbral alto	Indica el umbral donde se considera medio-alto.
optimum	valor óptimo	Indica el valor óptimo del medidor.

Un ejemplo de este medidor con la etiqueta <meter>:

<form name="formulario" method="post" action="/send.php">
  <!-- Medidor -->
  <meter min="0" max="100"
         low="25" high="75"
         optimum="100" value="75">
</form>

Además, dependiendo del valor de value y la posición del atributo optimum respecto al resto, los colores de la barra de medida cambiarán. A continuación tenemos un esquema de colores que nos muestra las combinaciones posibles:

Low < Optimum < High	Low < High < Optimum	Optimum < Low < High
Value < low	Value < low	Value < Low
Low < Value < High	Low < Value < high	Low < Value < High
Value > high	Value > High	Value > high

Como siempre, hay que prestar atención a la compatibilidad entre navegadores, si se quiere dar soporte a navegadores muy antiguos: