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

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.

L'élémentHTML<meter> représente une valeur scalaire dans un intervalle donné ou une valeur fractionnaire.

Exemple interactif

<label for="fuel">Niveau de carburant&nbsp;:</label><meter 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 inclutles attributs universels.

value: La valeur numérique courante. Elle doit être comprise entre les valeurs minimale et maximale (attributsmin etmax) si elles sont définies. Si elle n'est pas définie ou mal formée, la valeur est0. Si elle est définie mais n'est pas dans l'intervalle défini par les attributsmin etmax, la valeur est égale à l'extrémité la plus proche de l'intervalle.
Note :À moins que l'attributvalue soit compris entre0 et1 (inclus), les attributsmin etmax doivent définir l'intervalle de sorte que la valeur de l'attributvalue soit incluse dedans.
min: La borne numérique inférieure de l'intervalle mesuré. Elle doit être inférieure à la valeur maximale (attributmax), si elle est définie. Si elle n'est pas définie, la valeur minimale est0.
max: La borne numérique supérieure de l'intervalle mesuré. Elle doit être supérieure à la valeur minimale (attributmin), si elle est définie. Si elle n'est pas définie, la valeur maximale est1.
low: La borne numérique supérieure de la partie basse de l'intervalle mesuré. Elle doit être supérieure à la valeur minimale (attributmin), et aussi inférieure à la valeur haute et à la valeur maximale (attributshigh etmax respectivement), si elles sont définies. Si elle n'est pas définie ou si elle est inférieure à la valeur minimale, la valeur delow 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 (attributmax), et aussi supérieure à la valeur basse et à la valeur minimale (attributslow etmin respectivement), si elles sont définies. Si elle n'est pas définie ou si elle est supérieure à la valeur maximale, la valeur dehigh 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 attributsmin etmax). Lorsqu'il est utilisé avec les attributslow ethigh, il indique quelle partie de l'intervalle est considérée comme préférable. Par exemple, s'il est compris entre les attributsmin etlow, 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

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'attributmin est absent (ce qui est autorisé), la valeur minimale sera alors0.

HTML

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

Catégories de contenu	Contenu de flux,contenu phrasé, contenu étiquetable, contenu tangible.
Contenu autorisé	Contenu phrasé ne possédant pas d'élément`<meter>` parmi ses descendants.
Omission de balises	Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisés	Tout élément acceptant ducontenu phrasé.
Rôle ARIA implicite	`meter`
Rôles ARIA autorisés	Aucun`role` autorisé
Interface DOM	`HTMLMeterElement`