meter HTML5: range di misura

Vediamo come usare il tag HTML5 meter. Esempi e codice.

Il tag <meter> serve per rappresentare una misurazione che presenta un valore minimo e uno massimo (range). Può essere usato dunque come elemento infografico a supporto dei nostri contenuti o dati. Le informazioni vengono stampate a schermo in modo statico.

Immaginate di dover creare una scheda che mostri il numero di voti o la percentuale di spazio disponibile su un disco: questo tag vi permetterà di porre in essere operazioni simili in poco tempo. Il supporto, per ora, è garantito da Google Chrome 8.0 in poi, Opera 11 e superiori, Firefox 3.5 e Safari 4.

Esempio:

<p>Il tuo punteggio è: <meter min="0" max="10" value="2">2 su 10</meter></p><p> Il tuo punteggio è: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>

I possibili parametri sono:

min- il valore minimo

max- il valore massimo

value- il valore effettivo

low- quando il valore è definito basso

high- quando il valore è definito alto

title- in genere si tratta dell'unità di misura (cm, giorni, voti, km,...)

optimum- il valore ottimale