mozilla

Revision 293727 of meter

  • Revision slug: HTML/Element/meter
  • Revision title: meter
  • Revision id: 293727
  • Created:
  • Creator: LeonardoPacheco
  • Is current revision? No
  • Comment

Revision Content

{{ HTMLVersionHeader(5) }}

Sumário

O elemento HTML meter (<meter>) pode representar um valor escalar dentro deu um intervalo conhecido ou um valor fracionário.

Nota de uso: A não seu que o atributo value esteja entre 0 e 1(inclusive), o atributo min e o atributo max devem definir o intervalo de modo que o valor do atributo value esteja dentro dele.

Contexto de uso

Content categories flow content, phrasing content, Labelable Form-associated content
Conteúdo permitido Phrasing content, mas nenhum elemento meter descendente.
Tag omission Nenhuma, ambas as tags iniciais e finais são obrigatórias.
Elementos pais permitidos Qualquer elemento que aceite phrasing content.
Documento normativo HTML5, section 4.10.8

Atributos

Como todos os elementos HTML, esse elemento suporta attributes.

{{ htmlattrdef("value") }}
O valor numérico atual. Ele deve estar entre os valores mínimos e máximo (o atributo min e o atributo max) se eles estiverem especificados. Se não especificado ou mal formatado, o valor é 0. Se especificado, mas fora do intervalo dado pelos atributos min e max, o valor é igual ao extremo do intervalo mais próximo.
{{ htmlattrdef("min") }}
O limite numérico mínimo do intervalo medido. Deve ser menor que o valor máximo (o atributo max), se especificado. Se não especificado, o valor mínimo é 0.
{{ htmlattrdef("max") }}
O limite numérico máximo do intervalo medido. Deve ser maior que o valor mínimo (o atributo min), se especificado. Se não especificado, o valor máximo é 1.
{{ htmlattrdef("low") }}
O limite numérico máximo da parte inferior do intervalo medido. Deve ser maior que o valor mínimo (o atibuto min), e também ser menor que o valor alto e o valor máximo (os atributos high e max, respectivamente), se estiver especificado. Se não especificado, ou se for menor que o valor mínimo, o valor de low é igual ao valor mínimo.
{{ htmlattrdef("high") }}
O limite numérico mínimo da parte superior do intervalo medido. Deve ser menor que o valor máximo (o atibuto max), e também ser maior que o valor baixo e o valor mínimo (os atributos low e min, respectivamente), se estiver especificado. Se não especificado, ou se for maior que o valor máximo, o valor de high é igual ao valor máximo.
{{ htmlattrdef("optimum") }}
Esse atributo indica o valor numérico ótimo. Deve estar dentro do intervalo (definido pelos atributos min e max). Quando com os atributos low e high, ele indica a região do intervalo qu é considerada preferível. Por exemplo, se estiver entre os atributos min e low, então a parte inferior do intervalo é considerada como ótima.
{{ htmlattrdef("form") }}
Esse atributo associa o elemento com um elemento form que é dono de um elemento meter. Por exemplo, um elemento meter pode estar mostrando um intervalo correspondente a um elemento input do type(tipo) number. Esse atributo só é utilizado se o elemento meter 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 form.

Exemplos

Exemplo simples

<p>Aquiça o forno para <meter min="200" max="500" value="350">350 graus</meter>.</p>

No Google Chrome, o medidor aparece como:

meter1.png

Exemplos de intervalos com High e Low

Note que nesse exemplo o atributo min foi omitido; isso é permitido, pois ele irá ser, por padrão, 0.

<p>Ele recebeu <meter low="69" high="80" max="100" value="84">B</meter> no exame.</p>

No Google Chrome, o medidor aparece como:

meter2.png

Compatibilidade de navegadores

{{ CompatibilityTable() }}

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 6.0 {{ CompatNo() }} {{ bug(555985) }} {{ CompatNo() }} 11.0 {{ CompatNightly("safari") }}
Recurso Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico {{ CompatNo() }} {{ CompatNo() }} {{ bug(555985) }} {{ CompatNo() }} 11.0 {{ CompatNo() }}

Veja também

  • {{ HTMLElement("progress") }}

Revision Source

<div>
  {{ HTMLVersionHeader(5) }}</div>
<h2 id="Sum.C3.A1rio">Sumário</h2>
<p>O elemento HTML <em>meter</em> (<code>&lt;meter&gt;</code>) pode representar um valor escalar dentro deu um intervalo conhecido ou um valor fracionário.</p>
<div class="note">
  <strong>Nota de uso: </strong>A não seu 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" target="_blank" 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">&lt;p&gt;Aquiça o forno para &lt;meter min="200" max="500" value="350"&gt;350 graus&lt;/meter&gt;.&lt;/p&gt;
</pre>
<p>No Google Chrome, o medidor aparece como:</p>
<p><img alt="meter1.png" class="internal default" 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">&lt;p&gt;Ele recebeu &lt;meter low="69" high="80" max="100" value="84"&gt;B&lt;/meter&gt; no exame.&lt;/p&gt;
</pre>
<p>No Google Chrome, o medidor aparece como:</p>
<p><img alt="meter2.png" class="internal default" src="/@api/deki/files/4941/=meter2.png"></p>
<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Recurso</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Suporte básico</td>
        <td>6.0</td>
        <td>{{ CompatNo() }} {{ bug(555985) }}</td>
        <td>{{ CompatNo() }}</td>
        <td>11.0</td>
        <td>{{ CompatNightly("safari") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Recurso</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Suporte básico</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }} {{ bug(555985) }}</td>
        <td>{{ CompatNo() }}</td>
        <td>11.0</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Veja_tamb.C3.A9m">Veja também</h2>
<ul>
  <li>{{ HTMLElement("progress") }}</li>
</ul>
Revert to this revision