Tag HTML <meter>

Le tag <meter> définit une valeur scalaire dans la même plage ou une représentation graphique d'un nombre fractionnaire. Le tag peut être utilisée lorsqu'il est nécessaire d'afficher, par exemple, le niveau de la batterie, le volume de fluide / pression, la proportion de la population ayant le droit de voter, etc.

Pour utiliser le tag <meter> la valeur maximale doit être connue.

Le tag <meter> n'est pas utilisée pour indiquer un indicateur de progression. Pour ce faire, utilisez le tag <progress>.

Syntaxe

Le tag <meter> est un élément apparié, le tag fermant est requis. C’est un tag de ligne, ce qui signifie qu'elle peut être utilisée dans la plupart des éléments, y compris <header> et <p>.

Le tag <meter> est en nouvel élément en HTML5.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <meter value="4" min="0" max="10">4 de 10</meter> 4 de 10<br>
    <meter value="0.75">75%</meter> 75%
  </body>
</html>

Résultat

Utilisez les proproiétés CSS background-color, box-shadow, width et height pour styler l'élément <progress>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 220px;
        height: 20px;
      }
      progress[value]::-webkit-progress-bar {
        background-color: #eee;
        box-shadow: 0 0 3px #666 inset;
      }
      progress[value]::-webkit-progress-value {
        background: -webkit-linear-gradient(-45deg, transparent 30%, #8ebf42 70%, #8ebf42 40%, transparent 30%),
        -webkit-linear-gradient(top, #96f204, #8ebf42),
        -webkit-linear-gradient(right, #96f204, #8ebf42);
        background-size: 40px 20px,  10%;
      }
    </style>
  </head>
  <body>
    <p>Téléchargement:
      <progress value="35" max="100"></progress>
      <span>35%</span>
    </p>
    <p>Progress bar:
      <progress value="80" max="100"></progress>
      <span>80%</span>
    </p>
  </body>
</html>

Résultat

Attribut Valeur Description
form form_id Spécifie le ou les formulaires auxquels le tag <meter> fait référence.
high number Indique les valeurs élevées (mais pas maximales). Si la valeur high est moins que la valeur low, alors high = low. Si high est supérieur à max, alors high = max.
low number Indique les valeurs bas (mais pas minimales). Cette valeur doit être moins que high. Si la valeur low est moins que la valeur min, alors low = min.
max number Spécifie la valeur maximale possible. Valeur par défaut est 1.
min number Spécifie la valeur minimale possible. Valeur par défaut est 0.
optimum number Spécifie le nombre optimal qui doit être compris dans la page définie par les attributs min et max. Il peut être plus grand que la valeur high. La couleur dépend de l'arrangement optimal: rouge: min ≤ optimum < low jeune: low ≤ optimum ≤ high vert: high < optimum ≤ max
value number Indique la valeur actuelle, qui doit être dans la plage définie par les attributs min et max. Attribut requis.

Le tag <meter> supporte également les Attributs globaux et les Attributs d'événements.


Support de Navigateurs

8+ 6+ 6+ 11+


Trouvez-vous cela utile?

Articles Associées