<meter> : l'élément de mesure

Exemple interactif

<label for="fuel">Niveau de carburant&nbsp;:</label>

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

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

Attributs

Cet élément inclut les attributs universels.

value

La valeur numérique courante. Elle doit être comprise entre les valeurs minimale et maximale (attributs min et max) si elles sont définies. Si elle n'est pas définie ou mal formée, la valeur est 0. Si elle est définie mais n'est pas dans l'intervalle défini par les attributs min et max, la valeur est égale à l'extrémité la plus proche de l'intervalle.

Note : À moins que l'attribut value soit compris entre 0 et 1 (inclus), les attributs min et max doivent définir l'intervalle de sorte que la valeur de l'attribut value soit incluse dedans.

min

La borne numérique inférieure de l'intervalle mesuré. Elle doit être inférieure à la valeur maximale (attribut max), si elle est définie. Si elle n'est pas définie, la valeur minimale est 0.

max

La borne numérique supérieure de l'intervalle mesuré. Elle doit être supérieure à la valeur minimale (attribut min), si elle est définie. Si elle n'est pas définie, la valeur maximale est 1.

low

La borne numérique supérieure de la partie basse de l'intervalle mesuré. Elle doit être supérieure à la valeur minimale (attribut min), et aussi inférieure à la valeur haute et à la valeur maximale (attributs high et max respectivement), si elles sont définies. Si elle n'est pas définie ou si elle est inférieure à la valeur minimale, la valeur de low est égale à la valeur minimale.

high

La borne numérique inférieure de la partie haute de l'intervalle mesuré. Elle doit être inférieure à la valeur maximale (attribut max), et aussi supérieure à la valeur basse et à la valeur minimale (attributs low et min respectivement), si elles sont définies. Si elle n'est pas définie ou si elle est supérieure à la valeur maximale, la valeur de high est égale à la valeur maximale.

optimum

Cet attribut indique la valeur numérique optimale. Elle doit être comprise dans l'intervalle (défini par les attributs min et max). Lorsqu'il est utilisé avec les attributs low et high, il indique quelle partie de l'intervalle est considérée comme préférable. Par exemple, s'il est compris entre les attributs min et low, alors la partie basse de l'intervalle est considérée comme préférable. Le navigateur peut colorer la barre du composant différemment selon que la valeur est inférieure ou égale à la valeur optimale.

Exemples

Exemple simple

HTML

<p>Niveau de batterie&nbsp;: <meter min="0" max="100" value="75">75%</meter></p>

Résultat

Exemple de plage haute et basse

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

HTML

<p>
  L'étudiante a eu un score de&nbsp;:
  <meter low="69" high="80" max="100" value="84">84%</meter>
</p>

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Créer des contrôles de formulaire verticaux
• L'élément HTML <progress>
• Les pseudo-éléments non-standards ::-webkit-meter-bar, ::-webkit-meter-inner-element, ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value