Pasek wyniku <meter>
Jak wstawić na stronie WWW pasek głosowania w ankiecie?
Pasek wyniku <meter value min max>
- Wersja podstawowa:
<meter value="współczynnik">alternatywa</meter>
- Minimum i maksimum:
<meter value="wartość" min="minimum" max="maksimum">alternatywa</meter>
- alternatywa
- Alternatywna zawartość, wyświetlana w przeglądarkach, które nie obsługują HTML5. Powinno się tam umieścić np. zapisaną tekstowo wartość, którą przedstawia pasek wyniku.
- współczynnik
- Liczba rzeczywista (z kropką dziesiętną zamiast przecinka!) z przedziału od 0.0 (0%) do 1.0 (100%)
- wartość
- Liczba z przedziału od minimum do maksimum
- minimum
- maksimum
- Przedział dopuszczalnych wartości jakie może osiągnąć wynik
Wygląd paska wyniku jest podobny do paska postępu (PROGRESS). Jednak w odróżnieniu od niego przedstawia określoną wartość (np. stopień zapełniania dysku albo liczbę głosów oddanych na określoną opcję w ankiecie), podczas gdy pasek postępu jest przeznaczony wyłącznie do określania stopnia ukończenia jakiegoś zadania.
Przykład <meter>
Zobacz przykład: METER
Przedziały wartości <meter low high optimum>
- Wersja podstawowa:
<meter value="współczynnik" low="niski" high="wysoki">alternatywa</meter>
- Minimum i maksimum:
<meter value="wartość" min="minimum" max="maksimum" low="niska" high="wysoka">alternatywa</meter>
- Wartość optymalna:
<meter value="współczynnik" low="niski" high="wysoki" optimum="optymalny">alternatywa</meter>
- Wartość optymalna - minimum i maksimum:
<meter value="wartość" min="minimum" max="maksimum" low="niska" high="wysoka" optimum="optymalna">alternatywa</meter>
- alternatywa
- współczynnik
- wartość
- minimum
- maksimum
- Patrz powyżej
- niski
- wysoki
- optymalny
- Liczby rzeczywiste (z kropką dziesiętną zamiast przecinka!) z przedziału od 0.0 do 1.0 (niski ≤ wysoki), które określają, jaka wartość współczynnika jest uznawana odpowiednio za: niską (domyślnie: 0.0), wysoką (domyślnie: 1.0), optymalną (domyślnie: 0.5)
- niska
- wysoka
- optymalna
- Liczby z przedziału od minimum do maksimum (niska ≤ wysoka), które określają, jaka wartość jest uznawana odpowiednio za: niską (domyślnie: minimum), wysoką (domyślnie: maksimum), optymalną (domyślnie: (maksimum - minimum) / 2)
Pasek wyniku może sygnalizować np. swoim kolorem stan, kiedy podana wartość nie mieści się w optymalnym przedziale. Atrybuty low="..." i high="..." pozwalają podzielić cały pasek na trzy przedziały: dolny, środkowy i górny. Natomiast wartość atrybutu optimum="..." wskazuje, który z tych przedziałów jest optymalny. W zależności od tego, w którym przedziale znajduje się podana wartość atrybutu value="...", możliwe są następujące ustawienia przedziałów i odpowiadające im stany wartości:
| Wartość | optimum < low < high (optimum w dolnym przedziale) | low < optimum < high (optimum w środkowym przedziale) | low < high < optimum (optimum w górnym przedziale) |
|---|---|---|---|
| value < low < high (wartość w dolnym przedziale) | optimum | ostrzeżenie | alarm |
| low < value < high (wartość w środkowym przedziale) | ostrzeżenie | optimum | ostrzeżenie |
| low < high < value (wartość w górnym przedziale) | alarm | ostrzeżenie | optimum |
W przypadku wartości znajdujących się dokładnie na granicy przedziałów, zachowanie przeglądarek może być niespójne.
Przykład <meter low high optimum>
Zobacz przykład: METER (low, high, optimum)
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
<meter> | 6 2010-09-02 | 16 2012-10-09 | 12 2015-07-29 | 11 2010-12-16 | 6 2012-07-25 |
<meter high> | 6 2010-09-02 | 16 2012-10-09 | 12 2015-07-29 | 11 2010-12-16 | 6 2012-07-25 |
<meter low> | 6 2010-09-02 | 16 2012-10-09 | 12 2015-07-29 | 11 2010-12-16 | 6 2012-07-25 |
<meter max> | 6 2010-09-02 | 16 2012-10-09 | 12 2015-07-29 | 11 2010-12-16 | 6 2012-07-25 |
<meter min> | 6 2010-09-02 | 16 2012-10-09 | 12 2015-07-29 | 11 2010-12-16 | 6 2012-07-25 |
<meter optimum> | 6 2010-09-02 | 16 2012-10-09 | 12 2015-07-29 | 11 2010-12-16 | 6 2012-07-25 |
<meter value> | 6 2010-09-02 | 16 2012-10-09 | 12 2015-07-29 | 11 2010-12-16 | 6 2012-07-25 |