1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
---
title: meter
slug: Web/HTML/Element/meter
translation_of: Web/HTML/Element/meter
---
<h2 id="Sumário">Sumário</h2>
<p>O elemento HTML <em>meter</em> (<code><meter></code>) pode representar um valor escalar dentro de um intervalo conhecido ou um valor fracionário.</p>
<div class="note"><strong>Nota de uso: </strong>A não ser que o atributo <strong>value</strong> esteja entre 0 e 1(inclusive), o atributo <strong>min</strong> e o atributo <strong>max</strong> devem definir o intervalo de modo que o valor do atributo<strong> value</strong> esteja dentro dele.</div>
<h2 id="Contexto_de_uso">Contexto de uso</h2>
<table class="standard-table">
<tbody>
<tr>
<td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Content categories</a></td>
<td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flow content</a>, <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a>, <a href="/en/HTML/Content_categories#form-labelable" title="en/HTML/Content categories#form labelable">Labelable</a> <a href="/en/HTML/Content_categories#form-associated" title="en/HTML/Content categories#form associated">Form-associated content</a></td>
</tr>
<tr>
<td>Conteúdo permitido</td>
<td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a>, mas nenhum elemento <code>meter</code> descendente.</td>
</tr>
<tr>
<td>Tag omission</td>
<td>Nenhuma, ambas as tags iniciais e finais são obrigatórias.</td>
</tr>
<tr>
<td>Elementos pais permitidos</td>
<td>Qualquer elemento que aceite phrasing content.</td>
</tr>
<tr>
<td>Documento normativo</td>
<td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-meter-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-meter-element">HTML5, section 4.10.8</a></td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Como todos os elementos HTML, esse elemento suporta<a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes"> attributes</a>.</p>
<dl>
<dt>{{ htmlattrdef("value") }}</dt>
<dd>O valor numérico atual. Ele deve estar entre os valores mínimos e máximo (o atributo<strong> min</strong> e o atributo <strong>max</strong>) se eles estiverem especificados. Se não especificado ou mal formatado, o valor é 0. Se especificado, mas fora do intervalo dado pelos atributos <strong>min</strong> e <strong>max</strong>, o valor é igual ao extremo do intervalo mais próximo.</dd>
<dt>{{ htmlattrdef("min") }}</dt>
<dd>O limite numérico mínimo do intervalo medido. Deve ser menor que o valor máximo (o atributo <strong>max</strong>), se especificado. Se não especificado, o valor mínimo é 0.</dd>
<dt>{{ htmlattrdef("max") }}</dt>
<dd>O limite numérico máximo do intervalo medido. Deve ser maior que o valor mínimo (o atributo <strong>min</strong>), se especificado. Se não especificado, o valor máximo é 1.</dd>
<dt>{{ htmlattrdef("low") }}</dt>
<dd>O limite numérico máximo da parte inferior do intervalo medido. Deve ser maior que o valor mínimo (o atibuto <strong>min</strong>), e também ser menor que o valor alto e o valor máximo (os atributos <strong>high</strong> e <strong>max</strong>, respectivamente), se estiver especificado. Se não especificado, ou se for menor que o valor mínimo, o valor de <strong>low</strong> é igual ao valor mínimo.</dd>
<dt>{{ htmlattrdef("high") }}</dt>
<dd>O limite numérico mínimo da parte superior do intervalo medido. Deve ser menor que o valor máximo (o atibuto <strong>max</strong>), e também ser maior que o valor baixo e o valor mínimo (os atributos <strong>low</strong> e <strong>min</strong>, respectivamente), se estiver especificado. Se não especificado, ou se for maior que o valor máximo, o valor de <strong>high</strong> é igual ao valor máximo.</dd>
<dt>{{ htmlattrdef("optimum") }}</dt>
<dd>Esse atributo indica o valor numérico ótimo. Deve estar dentro do intervalo (definido pelos atributos <strong>min</strong> e <strong>max</strong>). Quando com os atributos <strong>low</strong> e <strong>high</strong>, ele indica a região do intervalo qu é considerada preferível. Por exemplo, se estiver entre os atributos <strong>min</strong> e <strong>low</strong>, então a parte inferior do intervalo é considerada como ótima.</dd>
<dt>{{ htmlattrdef("form") }}</dt>
<dd>Esse atributo associa o elemento com um elemento<code> form</code> que é dono de um elemento <code>meter</code>. Por exemplo, um elemento <code>meter</code> pode estar mostrando um intervalo correspondente a um elemento <code>input</code> do <strong>type</strong>(tipo) <em>number</em>. Esse atributo só é utilizado se o elemento <code>meter</code> está sendo utilizado como um elemento associado a um formulário; mesmo assim, ele pode se romitido se o elemento for um descendente de um elemento <code>form</code>.</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Simple_example" name="Simple_example">Exemplo simples</h3>
<pre class="brush: html"><p>Aqueça o forno para <meter min="200" max="500" value="350">350 graus</meter>.</p>
</pre>
<p>No Google Chrome, o medidor aparece como:</p>
<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p>
<h3 id="Hilo_Range_example" name="Hilo_Range_example">Exemplos de intervalos com High e Low</h3>
<p>Note que nesse exemplo o atributo <strong>min</strong> foi omitido; isso é permitido, pois ele irá ser, por padrão, 0.</p>
<pre class="brush: html"><p>Ele recebeu <meter low="69" high="80" max="100" value="84">B</meter> no exame.</p>
</pre>
<p>No Google Chrome, o medidor aparece como:</p>
<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p>
<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
<p>{{Compat("html.elements.meter")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{ HTMLElement("progress") }}</li>
</ul>
|
