L'élément meter
L'élément meter est utilisé pour afficher
une certaine valeur de manière stylisée.
L'apparence de l'élément est une barre partiellement ou totalement remplie. La barre peut être verte, jaune ou rouge (la couleur de la barre dépend des valeurs des attributs, nous en parlerons plus loin) :
L'élément meter doit être utilisé, par
exemple, dans la situation suivante : vous voulez
afficher à l'écran la valeur de température actuelle,
alors que la température peut varier de 0
à 100. Vous devez spécifier les attributs
suivants : l'attribut value doit indiquer
la valeur de température actuelle, l'attribut min
- la valeur minimale possible (dans notre
cas 0), l'attribut max - la valeur maximale
possible (dans notre cas 100).
En fonction de la valeur de l'attribut value
la barre sera petite ou grande. Si
vous spécifiez value avec la valeur 10,
alors la barre sera petite (car 10
est très proche du minimum - zéro), si
vous spécifiez la valeur 90, alors la barre sera
grande (car 90 est proche du maximum
- 100). Si vous spécifiez la valeur 100 - alors
la barre occupera tout l'élément (car la valeur
a atteint le maximum).
Si vous spécifiez une valeur supérieure à 100,
la barre occupera quand même tout l'élément.
Si vous spécifiez 0 ou moins - alors il n'y aura
pas de barre du tout.
Exemple
La valeur de l'attribut value est petite :
<meter value="10" min="0" max="100"></meter>
:
Exemple
La valeur de l'attribut value est grande :
<meter value="90" min="0" max="100"></meter>
:
Exemple
La valeur de l'attribut value est moyenne :
<meter value="50" min="0" max="100"></meter>
:
Exemple
La valeur de l'attribut value est égale au maximum :
<meter value="100" min="0" max="100"></meter>
:
Exemple
La valeur de l'attribut value est égale au minimum :
<meter value="0" min="0" max="100"></meter>
:
Exemple
La valeur de l'attribut value est supérieure au maximum :
<meter value="110" min="0" max="100"></meter>
:
Exemple
La valeur de l'attribut value est inférieure au minimum :
<meter value="-10" min="0" max="100"></meter>
:
Ajout des attributs low et high
L'élément meter a encore 2 attributs :
low et high.
Examinons leur fonctionnement avec l'exemple de la température.
Je rappelle que notre température minimale
est de 0, et la maximale - de 100.
Supposons maintenant que nous voulions définir les plages suivantes
- "température froide" de 0 à 20,
"normale" de 20 à 80 et
"chaude" de 80 à 100.
Pour définir la température froide, spécifions
la valeur de l'attribut low comme le nombre 20.
Il en résultera que de zéro (c'est la valeur de l'attribut
min) à 20 (valeur de l'attribut
low) nous aurons une zone de valeurs basses.
Pour définir la température chaude, spécifions
la valeur de l'attribut high comme le nombre 80.
Il en résultera que de 80 (c'est la valeur
de l'attribut high) à 100 (valeur
de l'attribut max) nous aurons une zone de valeurs
hautes.
La température normale sera de 20
(c'est la valeur de l'attribut low) à 80
(valeur de l'attribut high). Cette zone
sera appelée zone de valeurs normales.
Désormais, en fonction de la zone dans laquelle
se trouve la valeur de l'attribut value,
la barre sera colorée en vert ou
en jaune. Le vert sera affiché si nous sommes dans
la zone de valeurs normales, et le jaune
- si nous sommes dans la zone de valeurs hautes ou basses.
Exemple
La valeur de l'attribut value se trouve dans la
zone de valeurs basses :
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Exemple
La valeur de l'attribut value se trouve dans la
zone de valeurs normales :
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Exemple
La valeur de l'attribut value se trouve dans la
zone de valeurs hautes :
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Ajout de l'attribut optimum
L'attribut optimum définit la valeur
optimale. Pour notre exemple, la température
optimale peut être froide, normale
ou chaude - à votre choix. Supposons
que vous indiquiez que la température optimale
est froide. Désormais, en fonction de la valeur
de l'attribut value (c'est-à-dire de la température
actuelle) la couleur de la barre sera verte,
jaune ou rouge.
Si la température actuelle se trouve dans la zone des températures optimales (et nous avons indiqué que l'optimale est froide), alors la couleur de la barre sera verte. Si la température actuelle se trouve dans la zone adjacente à la zone optimale (dans notre cas, c'est la température normale), alors la barre deviendra jaune. Si la température actuelle se trouve dans une zone non adjacente à la zone optimale (dans notre cas, c'est la température chaude), alors la barre deviendra rouge.
De manière analogue, tout se passera si la température optimale est spécifiée comme chaude. Dans ce cas, si la température actuelle se trouve dans la zone des températures chaudes - la barre sera verte, si elle se trouve dans la zone normale - jaune, si dans la zone froide - rouge.
Si la température optimale est spécifiée comme normale, alors la barre ne peut être que verte (si la température actuelle se trouve dans la zone normale) ou jaune (si la température actuelle se trouve dans une zone adjacente à la zone normale, c'est-à-dire chaude ou froide).
Pour indiquer quelle plage est optimale,
vous devez spécifier comme valeur de l'attribut
optimum n'importe quel nombre de cette plage.
Dans les exemples ci-dessous, la valeur de l'attribut optimum
se trouve dans la zone de valeurs basses
(c'est-à-dire des températures froides).
Exemple
La valeur de l'attribut value se trouve dans la
zone de valeurs basses :
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Exemple
La valeur de l'attribut value se trouve dans la
zone de valeurs normales :
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Exemple
La valeur de l'attribut value se trouve dans la
zone de valeurs hautes :
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Dans les exemples ci-dessous, la valeur de l'attribut optimum
se trouve dans la zone de valeurs hautes
(c'est-à-dire des températures chaudes).
Exemple
La valeur de l'attribut value se trouve dans la
zone de valeurs basses :
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Exemple
La valeur de l'attribut value se trouve dans la
zone de valeurs normales :
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Exemple
La valeur de l'attribut value se trouve dans la
zone de valeurs hautes :
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Dans les exemples ci-dessous, la valeur de l'attribut optimum
se trouve dans la zone de valeurs normales
(c'est-à-dire des températures normales).
Exemple
La valeur de l'attribut value se trouve dans la
zone de valeurs basses :
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Exemple
La valeur de l'attribut value se trouve dans la
zone de valeurs normales :
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Exemple
La valeur de l'attribut value se trouve dans la
zone de valeurs hautes :
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Anciens navigateurs
Les anciens navigateurs ne pourront pas afficher l'élément meter
de manière stylisée et afficheront à la place
le contenu de l'élément lui-même :
<meter value="10" min="0" max="100">Ce texte s'affichera dans les anciens navigateurs.</meter>
:
Attributs
La valeur des attributs peut être un nombre fractionnaire et négatif.
| Attribut | Description |
|---|---|
value |
Définit la valeur actuelle. Attribut obligatoire. |
min |
Spécifie la valeur minimale possible. Valeur par défaut : 0. |
max |
Spécifie la valeur maximale possible. Valeur par défaut : 1. |
low |
Définit la limite de la zone de valeurs basses. Les valeurs basses seront du nombre dans l'attribut
min au nombre dans l'attribut low.
|
high |
Définit la limite de la zone de valeurs hautes. Les valeurs hautes seront du nombre dans l'attribut
high au nombre dans l'attribut max.
|
optimum |
Définit la zone de valeurs optimales. |
Voir aussi
-
l'élément
progress,
qui crée une barre de progression.
