Ostatnio edytowany:

meter

Autor: Virtual Patriot

Przeznaczenie elementu meter

Element meter reprezentuje wskaźnik wartości, gdy wartość minimalna oraz wartość maksymalna jest nam znana.

Dodatkowe techniczne informacje o elemencie meter

kategoria ogólna
kontekst zewnętrzny
element HTML, który tworzy wewnętrzny kontekst frazowany

Przykładowy Kod HTML

<fieldset>
  <legend>Średnia ocen</legend>

  <label>
    Średnia ocen klasy "III OK":
    <meter min="1" max="6" low="2.5" optimum="4" high="5" value="3.5">3.5</meter>
  </label>
</fieldset>

Kontekstem zewnętrznym przykładowego elementu "meter" jest element "label". Wspomniany element "label" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "label", jest prawidłowym kontekstem zewnętrznym dla elementu "meter".

kontekst wewnętrzny
zawartość frazowana, lecz nie element meter jako element potomek

Przykładowy Kod HTML

<fieldset>
  <legend>Średnia ocen</legend>

  <label>
    Średnia ocen klasy "III OK":
    <meter min="1" max="6" low="2.5" optimum="4" high="5" value="3.5">3.5</meter>
  </label>
</fieldset>

Kontekstem wewnętrznym przykładowego elementu "meter" jest wyłącznie tekst. Wspomniany tekst jest jednym z elementów, które należą do kategorii zawartość frazowana. Ponadto elementem potomkiem wspomnianego elementu "meter" nie jest element "meter", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "3.5", jest prawidłowym kontekstem wewnętrznym dla elementu "meter".

Element meter posiada zdolność fallback. Zdolność fallback elementu meter uaktywnia się w momencie gdy przeglądarka internetowa nie interpretuje elementu meter.

wymagane elementy dzieci

brak

wymagane atrybuty
składnia HTML

<meter> ... </meter>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display
  • inline (jeżeli przeglądarka internetowa nie interpretuje danego elementu meter)
  • inline-block (jeżeli przeglądarka internetowa interpretuje dany element meter)

Dodatkowe domyślne reguły CSS elementu meter

/* jeżeli przeglądarka internetowa interpretuje element "meter" */
meter {
  display:inline-block;
}

Interpretacja elementu meter

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji elementu .

Opis atrybutów elementu meter

high

Przeznaczenie atrybutu high

Atrybut high wykorzystany wraz z elementem meter określa, od której wartości reprezentowanej przez dany element meter wspomniana wartość powinna być traktowana przez przeglądarkę internetową jako wartość wysoka.

Wartość domyślna

wartość atrybutu max (w każdej sytuacji)

Wartości atrybutu high

liczba

Należy podać liczbę dziesiętną.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <label>
      Średnia ocen uczniów klasy "III OK":
      <meter min="1" max="6" low="2.5" optimum="4" high="5" value="5.1">5.1</meter>
    </label>

  </body>
</html>

Rezultat

W momencie gdy wartością reprezentowaną przez przykładowy element "meter" będzie wartość większa od wartości "5", wartość reprezentowana przez wspomniany element "meter" będzie traktowana przez przeglądarkę internetową jako wartość wysoka, ponieważ do wspomnianego elementu "meter" został dodany atrybut "high" wraz z wartością "5".

Wspomniana wartość nie może być większa niż wartość atrybutu max danego elementu "meter", jak również wspomniana wartość nie może być mniejsza niż wartość atrybutu min danego elementu "meter".

low

Przeznaczenie atrybutu low

Atrybut low wykorzystany wraz z elementem meter określa, od której wartości reprezentowanej przez dany element meter wspomniana wartość powinna być traktowana przez przeglądarkę internetową jako wartość niska.

Wartość domyślna

wartość atrybutu min (w każdej sytuacji)

Wartości atrybutu low

liczba

Należy podać liczbę dziesiętną.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <label>
      Średnia ocen uczniów klasy "III OK":
      <meter min="1" max="6" low="2.5" optimum="4" high="5" value="2.4">2.4</meter>
    </label>

  </body>
</html>

Rezultat

W momencie gdy wartością reprezentowaną przez przykładowy element "meter" będzie wartość mniejsza od wartości "2.5", wartość reprezentowana przez wspomniany element "meter" będzie traktowana przez przeglądarkę internetową jako wartość niska, ponieważ do wspomnianego elementu "meter" został dodany atrybut "low" wraz z wartością "2.5".

Wspomniana wartość nie może być większa niż wartość atrybutu max danego elementu "meter", jak również wspomniana wartość nie może być mniejsza niż wartość atrybutu min danego elementu "meter".

max

Przeznaczenie atrybutu max

Atrybut max wykorzystany wraz z elementem meter określa maksymalną wartość, jaką może reprezentować dany element meter.

Wartość domyślna

1.0 (w każdej sytuacji)

Wartości atrybutu max

liczba

Należy podać liczbę dziesiętną.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <label>
      Średnia ocen uczniów klasy "III OK":
      <meter min="1" max="6" low="2.5" optimum="4" high="5" value="5">5</meter>
    </label>

  </body>
</html>

Rezultat

Maksymalną wartością, jaką może reprezentować przykładowy element "meter" jest wartość "6", ponieważ do wspomnianego elementu "meter" został dodany atrybut "max" wraz z wartością "6".

Wspomniana wartość nie może być mniejsza niż wartość atrybutu min danego elementu "meter".

min

Przeznaczenie atrybutu min

Atrybut min wykorzystany wraz z elementem meter określa minimalną wartość, jaką może reprezentować dany element meter.

Wartość domyślna

0 (w każdej sytuacji)

Wartości atrybutu min

liczba

Należy podać liczbę dziesiętną.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <label>
      Średnia ocen uczniów klasy "III OK":
      <meter min="1" max="6" low="2.5" optimum="4" high="5" value="3">3</meter>
    </label>

  </body>
</html>

Rezultat

Minimalną wartością, jaką może reprezentować przykładowy element "meter" jest wartość "1", ponieważ do wspomnianego elementu "meter" został dodany atrybut "min" wraz z wartością "1".

Wspomniana wartość nie może być większa niż wartość atrybutu max danego elementu "meter".

optimum

Przeznaczenie atrybutu optimum

Atrybut optimum wykorzystany wraz z elementem meter określa, która wartość reprezentowana przez dany element meter powinna być traktowana przez przeglądarkę internetową jako wartość optymalna.

Wartość domyślna

wartością domyślną w każdej sytuacji jest wartość środkowa występująca pomiędzy wartością atrybutu min, a wartością atrybutu max

Wartości atrybutu optimum

liczba

Należy podać liczbę dziesiętną.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <label>
      Średnia ocen uczniów klasy "III OK":
      <meter min="1" max="6" low="2.5" optimum="4" high="5" value="4">4</meter>
    </label>

  </body>
</html>

Rezultat

W momencie gdy wartością reprezentowaną przez przykładowy element "meter" będzie wartość równa "4", wartość reprezentowana przez wspomniany element "meter" będzie traktowana przez przeglądarkę internetową jako wartość optymalna, ponieważ do wspomnianego elementu "meter" został dodany atrybut "optimum" wraz z wartością "4".

Wspomniana wartość nie może być większa niż wartość atrybutu max danego elementu "meter", jak również wspomniana wartość nie może być mniejsza niż wartość atrybutu min danego elementu "meter".

value

Przeznaczenie atrybutu value

Atrybut value wykorzystany wraz z elementem meter określa wartość, jaką reprezentuje dany element meter w danej chwili.

Wartość domyślna

0 (w każdej sytuacji)

Wartości atrybutu value

liczba

Należy podać liczbę dziesiętną.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <label>
      Średnia ocen uczniów klasy "III OK":
      <meter min="1" max="6" low="2.5" high="5" optimum="4" value="3.5">3.5</meter>
    </label>

  </body>
</html>

Rezultat

Wartością, jaka została przypisana do przykładowego elementu "meter" jest wartość "3.5", dlatego wartością, jaką reprezentuje wspomniany element "meter" jest wartość "3.5", ponieważ do wspomnianego elementu "meter" został dodany atrybut "value" wraz z wartością "3.5".

Wspomniana wartość nie może być większa niż wartość atrybutu max danego elementu "meter", jak również wspomniana wartość nie może być mniejsza niż wartość atrybutu min danego elementu "meter".