En HTML5 se incluyen nuevas etiquetas que permiten crear facilmente medidores y barras de progreso que indiquen información al usuario.

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. Mediante el atributo max podemos definir el valor que debe tener la barra de progreso para estar completa y mediante el atributo value podemos definir el valor actual de la barra de progreso:

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

Mediante 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="http://pagina.com/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, que aún no es completa:

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).