<meter> - HTML5 elementer

HTML5 elementer, forklaring og eksempler - <meter>

<meter>

Viser en grafisk bar.

Kan for eksempel bruges til grafisk at vise hvor meget plads der er ledigt på harddisken.


The meter element represents a scalar gauge providing a measurement within a known range, or a fractional value.
Kilde : w3.org

Browserunderstøttelse fra caniuse.com :

<meter> er vist identisk med <progress>. Bortset for det formål de er beregnet til.
<progress> er beregnet til at blive ændret løbende hvor <meter> er beregnet til at blive sat én gang.

low og high attributterne inddeler <meter> i 3 områder.
optimum attributten angiver hvilke af disse 3 områder som skal være det optimale/bedste område.

Hvis optimum er lige med low eller high eller et sted imellem dem så er området mellem low og high det optimale område. Og områderne udenfor (hvis der er nogen) er under-optimale.

Ellers hvis optimum er mindre end low så er området mellem min og low det optimale område og området mellem low og high er under-optimalt og det rasterende område er under-under-optimalt.

Omvendt hvis optimum er højere end high så er området mellem high og max det optimale område og området mellem high og low er under-optimalt og det rasterende område er under-under-optimalt.

Farven på <meter> anhænger af om hvilket område værdien af value er i.
Hvis værdien af value er indenfor det optimale område kan browseren farve <meter> grøn.
Hvis værdien af value er indenfor det under-optimale område kan browseren farve <meter> gul.
Hvis værdien af value er indenfor det under-under-optimale område kan browseren farve <meter> rød.

Her ses hvordan værdien af de forskellige værdier skal være.
minvaluemax.
minlowhighmax.
minoptimummax.


















Elev nummer 1 fik :

Elev nummer 2 fik :

Elev nummer 3 fik :

Elev nummer 4 fik :

Elev nummer 5 fik :

Elev nummer 6 fik :

Elev nummer 7 fik :

Elev nummer 8 fik :

Elev nummer 9 fik :

Resultatet ovenfor er skabt af følgende kode

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Emner
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.