Ben's Hobbyhoekje -- HTML meter-tag

HTML meter-tag

Met de tag <meter> kun je gemeten waarden op het scherm laten zien. Het gaat hier om de statische weergave van een (statisch) meetresultaat. Dit in tegenstelling tot de tag <progress>, die bedoeld is om de voortgang van een langdurig proces weer te geven.

Om <meter> goed te gebruiken heb je eigenlijk altijd een<label> nodig. Dat betekent dat <meter> een id moet hebben dat de <meter>-tag aan het <label> koppelt.
De code voor een meter-balk in zijn eenvoudigste vorm is:

<label for="demo-1">Eenvoudige meter-balk : <label> <meter id="demo-1" value="45" max="100"> 45 </meter>

Dit geeft op het scherm:

Eenvoudige meter-balk : 45

De tekst ' 45 ', die tussen de begin- en eindtag staat, verschijnt alleen in beeld als de browser <meter> niet ondersteunt. Dat heb je alleen met oudere browsers; je kunt het ook weg laten.

De meter-tag heeft een aantal attributen, waarmee je het gedrag van de balk op het scherm kunt beïnvloeden, zie het overzicht hier onder. Op één na zijn die allemaal optioneel.

Eigenschap		Betekenis
form		Dit zou het id moeten zijn van de <form> waar de <meter> bij hoort. In de praktijk is een dergelijke koppeling niet zinvol. Dit attribuut wordt dan ook door geen enkele browser ondersteund. Niet gebruiken dus.
high		Getal waarvoor geldt: min < low < high* < max. Elke value* waarvoor geldt: high ≤ value ≤ max wordt beschouwd als hoog. value = 80, min = 0, max = 100, high = 75 : 90
low		Getal waarvoor geldt: min < low* < high < max. Elke value* waarvoor geldt: min ≤ value ≤ low wordt beschouwd als laag. value = 30, min = 0, max = 100, low = 40 : 30
max		Hoogste waarde (value) die de balk kan krijgen. Dit is een getal > 0. Default is 1.
min		Laagste waarde (value) die de balk kan krijgen. Dit is een getal ≥ 0. Default is 0.
optimum		Hiermee geef je aan wat beste waarde is voor de balk. Als optimum groter is dan high dan geldt: hoe hoger value, des te beter is het. Als optimum kleiner is dan low dan geldt: hoe lager value, des te beter is het. Als optimum tussen high en low is, zijn de waarden van value tussen high en low goed. Zie onderstaand voorbeeld: low = 30, high = 70, min = 0, max = 100, optimum = 80, value = 45 : 45 Merk op dat de balk geel is (value ligt tussen high en low. low = 30, high = 70, min = 0, max = 100, optimum = 80, value = 90 : 45 Merk op dat de balk groen is (value groter dan high en groter dan optimum).
value		Dit is het enige attribuut dat verplicht is. Het is een getal tussen min en max en geeft de waarde aan die de balk heeft.