în HTML

Ghid pentru indicatorul grafic <meter>: afișarea măsurătorilor scalare (nivel baterie, spațiu disc, scor putere parolă) cu atributele min, max, low, high și optimum.

Sintaxă tag

<meter min="0" max="100" low="30" high="80" optimum="90" value="75">75%</meter>

Tagul <meter> afișează o măsurătoare scalară dintr-un interval numeric cunoscut sau o valoare fracționară. Exemple tipice sunt: gradul de ocupare al unui hard disk, nivelul de încărcare al bateriei, procentul de răspunsuri corecte la un test sau scorul de securitate al unei parole.

Notă importantă: Tagul <meter> nu trebuie folosit pentru a indica progresul unei acțiuni (cum ar fi descărcarea unui fișier); pentru sarcini în derulare se utilizează exclusiv tagul <progress>.

Exemple practice cu intervale critice și optim

<!-- 1. Spațiu pe disc ocupat: Optim când este redus (sub 50GB) -->
<label for="spatiu-disc">Spațiu pe disc SSD (500 GB total):</label>
<meter id="spatiu-disc" min="0" max="500" low="100" high="400" optimum="50" value="420">
    420 din 500 GB ocupați
</meter>

<!-- 2. Puterea unei parole (optim când este mare) -->
<label for="putere-parola">Puterea parolei alese:</label>
<meter id="putere-parola" min="0" max="100" low="40" high="80" optimum="95" value="85">
    85% (Foarte Puternică)
</meter>

Cum funcționează colorarea automată a indicatorului

Browserul schimbă automat culoarea barei (verde, galben sau roșu) în funcție de poziția atributului value față de low, high și optimum:

Dacă optimum este mai mare decât high (ex: puterea parolei), valorile mari sunt afișate în verde, iar cele mici în roșu.
Dacă optimum este mai mic decât low (ex: consum memorie RAM), valorile mici sunt verzi, iar valorile mari care depășesc high devin roșii.