Tag HTML <meter>
Nesta postagem, abordaremos o medidor de tags com exemplos . Com o objetivo de atender aos requisitos de aprendizagem.
A tag HTML <meter> é usada para representar uma medida escalar dentro de um intervalo conhecido. Normalmente é usado para exibir o progresso de uma tarefa ou o nível de conclusão de um formulário ou pesquisa
Os dados podem ser medidos pelo elemento do medidor com base em uma faixa específica (um medidor):
Example:
Aqui está um exemplo da etiqueta do medidor para mostrar a bateria:
Example:
Aqui está outro exemplo de como você pode usar a tag meter para indicar o número de visitantes de uma página da web durante um determinado período de tempo:
Example:
Também podemos usar os atributos baixo, alto e ótimo para indicar os intervalos considerados baixo, alto e ótimo. Por exemplo:
Example:
Uso do medidor de tags
O tag meter <meter> indica uma medição escalar dentro de um intervalo especificado ou um valor fracionário. Alternativamente, isso é chamado de medidor.
A quantidade de largura de banda que uma consulta usa, sua relevância para a pergunta, etc.
Aqui estão alguns usos comuns da tag HTML <meter> :
- A tag <meter> pode ser usada para rastrear o andamento de uma tarefa ou processo, como a conclusão de uma pesquisa ou o upload de um arquivo. Os desenvolvedores podem definir o atributo de valor para atualizar a barra de progresso em tempo real.
- A tag <meter> pode ser usada para exibir o nível de algo, como a duração restante da bateria em um dispositivo móvel ou a quantidade de espaço de armazenamento restante em um disco rígido.
- A tag <meter> pode ser usada para representar uma classificação ou pontuação, como a classificação do usuário para um produto ou serviço.
- A tag <meter> pode ser usada para visualizar dados de maneira significativa, como a faixa de temperatura de uma sala ou a velocidade de um objeto em movimento.
- A tag <meter> pode ser usada para fornecer feedback aos usuários, como a força de uma senha ou a qualidade de uma gravação de áudio.
Atributos
Global
O tag meter <meter> também funciona com os Atributos Globais em HTML .
Evento
Os atributos do evento também são compatíveis com a tag <meter> do HTML .
Lista de Atributos
| Atributo | Valor | Visão geral |
|---|---|---|
| forma | form_id | Um formulário identifica a qual elemento <meter> se relaciona. |
| alto | número | Defina o que deve ser uma faixa de alto valor. |
| baixo | número | Indica a faixa na qual um valor baixo é aceito. |
| máximo | número | Define o valor máximo do intervalo. |
| min | número | Limite o intervalo a um valor mínimo. O valor padrão é 0. |
| ótimo | número | Mostra o valor ideal do medidor. |
| valor | número | É necessário. Indica o valor atual do medidor. |
Compatibilidade do navegador
Os números da tabela indicam a versão inicial do navegador que aceita completamente o elemento .
| Elemento |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <metro> | 8,0 | 13,0 | 16,0 | 6.0 | 11.5 |
Benefícios do medidor de tags
Aqui estão alguns benefícios de usar a tag HTML <meter> :
- A tag <meter> pode fornecer aos usuários feedback valioso sobre o andamento de uma tarefa ou o nível de conclusão de um formulário ou pesquisa. Isso pode ajudar a melhorar a experiência do usuário e reduzir a frustração e a confusão.
- A tag <meter> foi projetada para ser acessível a usuários com deficiências, incluindo usuários de leitores de tela. Ao fornecer um rótulo descritivo para o medidor, os desenvolvedores podem garantir que ele seja devidamente identificado e compreendido por todos os usuários.
- A tag <meter> é suportada por todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Isso garante que ele possa ser usado por uma ampla gama de usuários e dispositivos.
- A tag <meter> pode ser personalizada usando CSS para corresponder ao design visual da página da Web ou aplicativo. Isso permite que os desenvolvedores criem uma experiência de usuário consistente e coesa.
- A tag <meter> pode ser usada para visualizar dados de forma significativa e intuitiva. Isso pode ajudar a comunicar informações complexas de forma mais eficaz e facilitar a compreensão dos usuários.
