<output>
Wynik obliczenia lub działania użytkownika, na przykład suma w kalkulatorze.
- Wyświetlanie
- inline
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa (phrasing content)
Przykład
#<form oninput="total.value = Number(minutes.value) * Number(days.value)">
<p><label>Minuty dziennie <input type="number" id="minutes" value="30" min="0" max="240"></label></p>
<p><label>Dni w tygodniu <input type="number" id="days" value="5" min="1" max="7"></label></p>
<p>Łącznie w tygodniu: <output name="total" for="minutes days">150</output> min</p>
</form>Definicja i zastosowanie
#Element <output> wyświetla wynik: sumę zamówienia, wartość ustawioną suwakiem, wynik kalkulatora. Treść zmieniasz zwykle w JavaScripcie przez właściwość value, a atrybut for wskazuje, z których pól wynik powstał.
Przeglądarki traktują <output> jak region statusu, więc czytniki ekranu mogą ogłosić nową wartość bez przenoszenia fokusu. Z tego powodu to lepszy wybór niż zwykły <span> dla wyniku, który zmienia się podczas wpisywania danych.
Choć <output> należy do elementów formularza, jego zawartość nie jest wysyłana na serwer. Jeśli serwer potrzebuje wyniku, niech obliczy go sam.
Składnia
#<output name="wynik" for="pole1 pole2">0</output>Atrybuty
#lista identyfikatorów
Identyfikatory pól, z których wynika wartość, rozdzielone spacjami. Opisuje tę zależność dla technologii asystujących, ale sam niczego nie oblicza.name
tekst
Nazwa elementu, dzięki której odwołasz się do niego w skrypcie, na przykładform.elements.total. Mimo nazwy wartość nie jest wysyłana z formularzem.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#for
lista identyfikatorówIdentyfikatory pól, z których wynika wartość, rozdzielone spacjami. Opisuje tę zależność dla technologii asystujących, ale sam niczego nie oblicza.
<form oninput="level.value = volume.value + '%'">
<label for="volume">Głośność lektora</label>
<input type="range" id="volume" min="0" max="100" value="60">
<output name="level" for="volume">60%</output>
</form>Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Ustawiaj wynik przez
output.value, a nie przezinnerHTML. To prostsze i bezpieczne, bo wartość zawsze trafia do elementu jako zwykły tekst. - Tekst wpisany między znacznikami to wartość domyślna, do której
<output>wraca po zresetowaniu formularza.
Powiązane hasła
#- <form>Formularz, który zbiera dane od użytkownika i wysyła je pod wskazany adres.
- <input>Pole formularza: tekst, e-mail, hasło, liczba, data, suwak, pole wyboru, plik i wiele innych.
- <label>Etykieta pola formularza. Kliknięcie etykiety przenosi kursor do pola.
- <meter>Wskaźnik wartości w znanym zakresie: zajęte miejsce, wynik testu, poziom baterii.
- <progress>Pasek postępu zadania: wysyłania pliku, instalacji albo ukończenia kursu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.