Znacznik <output> w HTML służy do prezentowania wyniku obliczenia lub działania, które wykonywane jest na stronie, najczęściej przy pomocy JavaScriptu lub mechanizmów formularzy. Jest to semantyczny element wprowadzony w HTML5, który pozwala oddzielić sam wynik obliczenia od danych wejściowych i logiki liczenia.
Funkcje i zastosowania <output>
- Wyświetlanie wyników obliczeń –
<output>reprezentuje wynik działania, np. sumowania, mnożenia czy konwersji wartości, które użytkownik podaje w formularzu; - Współpraca ze skryptami – wyniki mogą być generowane dynamicznie przez JavaScript lub poprzez atrybut
oninputw formularzach HTML; - Poprawa semantyki HTML – zastosowanie
<output>zamiast np.<span>lub<div>sprawia, że kod jest czytelniejszy i lepiej zrozumiały dla narzędzi asystujących oraz wyszukiwarek.
Najważniejsze atrybuty <output>
| Atrybut | Znaczenie |
|---|---|
| name | Nazwa wyniku, często wykorzystywana przy przesyłaniu formularzy. |
| for | Określa, z którymi elementami (np. inputami) związany jest wynik. |
| form | Określa, do którego formularza przypisany jest element <output>. |
Przykład użycia atrybutów:
<output name="suma" for="a b"></output>
Tutaj wynik jest powiązany z polami o identyfikatorach a i b.
Przykłady użycia <output>
1. Proste sumowanie wartości z dwóch pól formularza
<form oninput="wynik.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0"> =
<output name="wynik" for="a b"></output>
</form>
Wartość w polu <output> jest automatycznie aktualizowana przy każdej zmianie wejścia.
2. Kalkulator BMI z dynamicznym wynikiem
<form oninput="bmi.value = Math.round(waga.value / ((wzrost.value/100) ** 2) * 100) / 100">
Waga (kg): <input type="number" id="waga" value="70"><br>
Wzrost (cm): <input type="number" id="wzrost" value="170"><br>
BMI: <output name="bmi" for="waga wzrost"></output>
</form>
Po zmianie wartości w polach waga lub wzrost, obliczony BMI pojawia się w <output>.
3. Obsługa wyniku przez JavaScript
<form id="kalkulator">
<input type="number" id="a" value="1">
<select id="dzialanie">
<option value="+">+</option>
<option value="-">-</option>
</select>
<input type="number" id="b" value="2"> =
<output name="wynik" id="wynik"></output>
</form>
<script>
function przelicz() {
const a = parseFloat(document.getElementById('a').value);
const b = parseFloat(document.getElementById('b').value);
const dz = document.getElementById('dzialanie').value;
let wynik = dz === '+' ? a + b : a - b;
document.getElementById('wynik').value = wynik;
}
document.getElementById('kalkulator').oninput = przelicz;
przelicz();
</script>
Tutaj <output> jest zarządzane całkowicie przez kod JavaScript, pozwalając na bardziej złożone logiki.
Cechy <output>
- Domyślnie wyświetlany inline – nie zajmuje całego wiersza;
- Wspierany przez większość nowoczesnych przeglądarek – obsługa od Internet Explorera 11, Chrome 10, Firefox 4, Safari 5.1, Opera 11;
- Część semantycznych elementów HTML5 – dla lepszej czytelności kodu i wsparcia narzędzi asystujących.
Najczęstsze przypadki użycia <output>
- Interaktywne formularze z natychmiastową prezentacją wyniku (np. kalkulatory, konfiguratory),
- Wizualna prezentacja wyników przetwarzania danych wejściowych przez użytkownika,
- Formularze, gdzie wynik powinien być wysłany razem z innymi danymi (dzięki atrybutowi
name).
Znacznik <output> jest niezastąpionym narzędziem w nowoczesnych, interaktywnych aplikacjach webowych, zwiększając czytelność i semantykę kodu oraz zapewniając intuicyjne sposoby prezentacji wyników obliczeń użytkownikowi.
