Accueil    HTML    Balise Meter
 



balise meter  Balise METER : mesure

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



La balise <meter> permet d'afficher une mesure au sein d'une plage de valeurs déterminées dans le contexte visuel d'une jauge. Il est possible de définir au niveau de la plage de valeurs une valeur basse ("low") en dessous de laquelle les mesures sont considérées comme faibles et une valeur haute ("high") au dessus de laquelle les mesures sont considérées comme élevées. Ces deux indicateurs permettent également de conditionner la couleur d'affichage (rouge, jaune ou verte) de la jauge.

Il ne faut pas utiliser la balise meter pour afficher des données dynamiques associées à une progression, la balise <progress> étant définie pour ce type de besoin.



Propriétés pour la balise meter :




Propriétés Définition Valeurs
high mesure au dessus de laquelle les mesures sont considérées comme élevées valeur
low valeur en dessous de laquelle les mesures sont considérées comme faibles valeur
max Valeur maximale de la jauge valeur
min Valeur minimale de la jauge valeur
optimum Valeur optimale pour la mesure valeur
value Valeur actuelle de la mesure valeur



Exemples d'utilisation de la balise meter :




Utilisation de la balise meter pour l'affichage de mesures entre 0 et 20 :
Avec le style par défaut de la balise :

<meter min="0" max="20" low="8" high="16" optimum="20" value="2">2/20</meter>
<meter min="0" max="20" low="8" high="16" optimum="20" value="6">6/20</meter>
<meter min="0" max="20" low="8" high="16" optimum="20" value="10">10/20</meter>
<meter min="0" max="20" low="8" high="16" optimum="20" value="16">16/20</meter>
<meter min="0" max="20" low="8" high="16" optimum="20" value="20">20/20</meter>

Avec un style personnalisé et l'utilisation de l'attribut "title" :

<meter style="width:250px; height:12px; border:solid 1px grey;" min="0" max="20" low="8" high="16" optimum="20" value="2" title="2/20">2/20</meter>
<meter style="width:250px; height:12px; border:solid 1px grey;" min="0" max="20" low="8" high="16" optimum="20" value="6" title="6/20">6/20</meter>
<meter style="width:250px; height:12px; border:solid 1px grey;" min="0" max="20" low="8" high="16" optimum="20" value="10" title="10/20">10/20</meter>
<meter style="width:250px; height:12px; border:solid 1px grey;" min="0" max="20" low="8" high="16" optimum="20" value="16" title="16/20">16/20</meter>
<meter style="width:250px; height:12px; border:solid 1px grey;" min="0" max="20" low="8" high="16" optimum="20" value="20" title="20/20">20/20</meter>



Utilisation de la balise meter pour l'affichage de mesures entre 0 et 20 :
Avec le style par défaut de la balise :
2/20
6/20
10/20
16/20
20/20

Avec un style personnalisé et l'utilisation de l'attribut "title" :
2/20
6/20
10/20
16/20
20/20