<meter>

Exemple interactif

<label for="fuel">Fuel level:</label>

<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
  at 50/100
</meter>

label {
  padding-right: 10px;
  font-size: 1rem;
}

Attributs

Comme pour les autres éléments HTML, cet élément inclut également les attributs universels.

form

Cet attribut contient l'attribut id de l'élément <form> auquel celui-ci est rattaché. Par défaut, il est à l'élément <form> qui est son plus proche ancêtre.

high

Cet attribut représente la valeur minimale à partir de laquelle la mesure est considérée comme haute. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs min et max. Si l'attribut low est aussi défini, il doit être plus grand que celui-ci.

low

Cet attribut représente la valeur maximale à partir de laquelle la mesure est considérée comme basse. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs min et max. Si l'attribut high est aussi défini, il doit être plus petit que celui-ci.

max

Cet attribut représente la valeur maximale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 1.0. Il doit être strictement plus grand que la valeur de l'attribut min.

min

Cet attribut représente la valeur minimale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 0.0. Il doit être strictement plus petit que la valeur de l'attribut max.

optimum

Cet attribut représente la valeur idéale pour la mesure. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs min et max. Si la valeur de optimum est inférieure à low, s'il est défini, cela signifie que les valeurs les plus petites sont meilleures; si sa valeur est supérieure à high, s'il est défini, cela signifie que les valeurs les plus grandes sont meilleures; enfin, s'il est compris entre low et high, cela signifie que les extrêmes ne sont pas les meilleures grandeurs.

value

Cette attribut représente la valeur courante de la mesure. Cet attribut est obligatoire.

Note : Il est recommandé aux auteurs de dupliquer les valeurs des attributs min, max et value dans le contenu de cet élément de façon à permettre aux navigateurs ne supportant pas l'élément <meter> de transmettre ces informations aux utilisateurs. Par exemple :

html

Utilisation de l'espace de stockage:
<meter value="6" max="8">6 blocs utilisés (sur un total de 8)</meter>

Il n'y a pas de moyen sémantique de décrire l'unité de l'attribut value, néanmoins l'attribut global title peut être utilisé pour cela.

Exemples

Exemple simple

HTML

<p>
  Chauffez le four à <meter min="100" max="250" value="180">180 degrés</meter>.
</p>

Résultat

Utilisation de high et low

On remarquera ici que l'attribut min est absent (ce qui est autorisé), la valeur minimale sera alors 0.

HTML

<p>
  Il a eu
  <meter low="69" high="80" max="100" value="84">B</meter>
  à son examen.
</p>

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• <progress>