Autor publikacji: Virtual Patriot - Administrator

meter

Data publikacji: Kwiecień 09 2016
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the meter element (HTML5.2)

Przeznaczenie elementu `meter`

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

Dodatkowe artykuły związane z elementem `meter`

brak

Informacje techniczne 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".

wymagane elementy dzieci

brak

wymagane atrybuty

atrybut value

zdolność fallback

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

składnia HTML

<meter> ... </meter>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline-block (jeżeli przeglądarka internetowa interpretuje element meter)
inline (jeżeli przeglądarka internetowa nie interpretuje elementu meter)

Przypuszczalnie domyślne reguły CSS elementu `meter`

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

Interpretacja elementu `meter`

: tak
: tak
: tak
: tak
: nie
: tak

Zobacz więcej informacji o interpretacji elementu meter.

Opis atrybutów elementu `meter`

Atrybut Lokalny

high

Przeznaczenie atrybutu `high`

Atrybut high wykorzystany wraz z elementem meter pozwala nam określić wartość stanowiącą dolną granicę wartości wysokiej dla wartości reprezentowanej przez dany element meter.

Wartość domyślna: wartość atrybutu max (w każdej sytuacji)

Wartości atrybutu `high`

liczba

Należy podać liczbę dziesiętną lub liczbę całkowitą.

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

Średnia ocen uczniów klasy "III OK": 5.1

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

Docelowa wartość nie może być mniejsza niż wartość atrybutu min, większa niż wartość atrybutu max oraz mniejsza niż wartość atrybutu low danego elementu "meter".

Atrybut Lokalny

low

Przeznaczenie atrybutu `low`

Atrybut low wykorzystany wraz z elementem meter pozwala nam określić wartość stanowiącą górną granicę wartości niskiej dla wartości reprezentowanej przez dany element meter.

Wartość domyślna: wartość atrybutu min (w każdej sytuacji)

Wartości atrybutu `low`

liczba

Należy podać liczbę dziesiętną lub liczbę całkowitą.

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

Średnia ocen uczniów klasy "III OK": 2.4

W momencie gdy wartością reprezentowaną przez przykładowy element "meter" będzie wartość mniejsza od wartości "2.5", wtedy wartość reprezentowana przez przykładowy element "meter" będzie traktowana przez przeglądarkę internetową jako wartość niska, gdyż wartością stanowiącą górną granicę wartości niskiej, dla wartości reprezentowanej przez przykładowy element "meter", jest wartość "2.5", ponieważ do wspomnianego elementu "meter" został dodany atrybut "low" wraz z wartością "2.5".

Docelowa wartość nie może być mniejsza niż wartość atrybutu min, większa niż wartość atrybutu max oraz większa niż wartość atrybutu high danego elementu "meter".

Atrybut Lokalny

max

Przeznaczenie atrybutu `max`

Atrybut max wykorzystany wraz z elementem meter pozwala nam określić 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ą lub liczbę całkowitą.

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

Średnia ocen uczniów klasy "III OK": 5

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".

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

Atrybut Lokalny

min

Przeznaczenie atrybutu `min`

Atrybut min wykorzystany wraz z elementem meter pozwala nam określić 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ą lub liczbę całkowitą.

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

Średnia ocen uczniów klasy "III OK": 3

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".

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

Atrybut Lokalny

optimum

Przeznaczenie atrybutu `optimum`

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

Wartość domyślna: średnia arytmetyczna z wartości atrybutu min oraz wartości atrybutu max (w każdej sytuacji)

Wartości atrybutu `optimum`

liczba

Należy podać liczbę dziesiętną lub liczbę całkowitą.

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

Średnia ocen uczniów klasy "III OK": 4

W momencie gdy wartością reprezentowaną przez przykładowy element "meter" będzie wartość równa "4", wtedy wartość reprezentowana przez przykładowy 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".

Docelowa wartość nie może być mniejsza niż wartość atrybutu min oraz większa niż wartość atrybutu max danego elementu "meter".

Atrybut Lokalny

value

Przeznaczenie atrybutu `value`

Atrybut value wykorzystany wraz z elementem meter pozwala nam określić wartość, jaką powinien reprezentować 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ą lub liczbę całkowitą.

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

Średnia ocen uczniów klasy "III OK": 3.5

Wartością, jaką reprezentuje przykładowy element "meter" w danej chwili, jest wartość "3.5", ponieważ do wspomnianego elementu "meter" został dodany atrybut "value" wraz z wartością "3.5".

Docelowa wartość nie może być mniejsza niż wartość atrybutu min oraz większa niż wartość atrybutu max danego elementu "meter".