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+ |
Pratiquez vos connaissances
Quelle est la fonction de la balise <meter> en HTML?
Correcte!
Incorrecte!