Html meter

Html meter

A tag HTML <meter> é um elemento HTML5. 

A tag define uma medida escalar na faixa conhecida ou representação gráfica de um número fracionário. A tag pode ser utilizada quando for necessário exibir, por exemplo, o nível de carga da bateria, uso do disco, etc. Para utilizar a tag <meter> , é necessário saber o valor máximo.

A tag HTML meter define uma medida escalar dentro de um intervalo conhecido ou um valor fracionário. Isso também é conhecido como medidor.

Exemplos: uso do disco, relevância de um resultado de consulta etc.

Nota: A tag html meter não deve ser usada para indicar o progresso (como em uma barra de progresso). Para barras de progresso, use a tag <progress>.

Dica: Sempre adicione a tag <label> para melhores práticas de acessibilidade!

Atributos

form – Especifica a qual formulário o elemento <meter>

high – Especifica o intervalo que é considerado um valor alto

low – Especifica o intervalo que é considerado um valor baixo

max – Especifica o valor máximo do intervalo

min – Especifica o valor mínimo do intervalo. O valor padrão é 0

optimum – Especifica qual valor é o valor ideal para o medidor

value – Requeridos. Especifica o valor atual do medidor

O elemento HTML <meter>

O elemento do medidor é usado para exibir um medidor:

Veja o exemplo no código abaixo!

<label for="disco_c">Uso do disco C C:</label>
<meter id="disco_c" value="2" min="0" max="10">2 out of 10</meter><br>

<label for="disco_d">Uso do disco D:</label>
<meter id="disco_d" value="0.8">80%</meter>

<label for="disco_e">Uso do disco E:</label>
<meter id="disco_e" value="0.4">40%</meter>

Veja o Resultado!

Uso do disco C: 2 out of 10
Uso do disco D: 80%
Uso do disco E: 40%

Observação: A tag <meter> não é usada para indicar o progresso. Para isso, use a tag <progress>.