Page 123 - Guida tascabile HTML5

Come detto, <meter> ha invece un valore semantico differente: rende visivamente

una misura (pensate per esempio alla forza di una password, al consumo di un
pacchetto dati mobili o ad altre misure quantificabili e definite tra due intervalli

noti).

Temperatura:<br>
<meter value="19" min="14" max="24">19°C</meter>

Figura 6.29 Il valore numerico viene tradotto graficamente con <meter> per offrire

un feedback più immediato all’utente.

Anche in questo caso all’interno del tag è consigliabile inserire un contenuto di

fallback per garantire una maggiore accessibilità.
È possibile specificare più attributi, per consentire al browser di interpretare

correttamente il significato del dato inserito.

min e max rappresentano gli estremi inferiore e superiore dell’indicatore, in

base ai quali sarà visualizzato il valore (se omessi la misura farà riferimento

ai valori di default 0 e 1).
value è l’effettivo valore della misura, compreso tra massimo e minimo.

low e high rappresentano le soglie (inferiore e superiore), utili per delimitare

il range di valori considerati accettabili all’interno degli estremi: questa

indicazione può essere utilizzata dal browser durante il rendering per
caratterizzare ulteriormente l’aspetto del controllo.

optimum rappresenta un valore ottimale per la misura: se si trova tra min e low

indicherà che valori più bassi sono migliori e, al contrario, se si trova tra high

e max renderà preferibili i valori più alti.

NOTA Anche il tag <meter> può essere personalizzato nell’aspetto attraverso adeguate
regole di stile CSS.

Conclusioni