Czym jest element <output> w HTML5?

Element <output> służy do wyświetlania wyników obliczeń, które zazwyczaj wykonywane są po stronie klienta.

Przykłady użycia:

1. Powiązanie z elementami formularza:

   <!-- Deklarujemy input do wprowadzania liczby -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Deklarujemy input do wprowadzania innej liczby -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Deklarujemy output do wyświetlenia wyniku, powiązany z inputami po id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Pobieramy elementy input
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Pobieramy element output
     const result = document.querySelector('output[name="result"]');
   
     // Funkcja do aktualizacji wyniku
     function updateResult() {
       // Wykonujemy obliczenie i aktualizujemy wartość output
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Dodajemy nasłuchiwacze zdarzeń do aktualizacji wyniku przy zmianie inputów
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Wstępna aktualizacja wyniku przy ładowaniu strony
     updateResult();
   </script>
   

2. Wyświetlanie wyników za pomocą JavaScript:

   <!-- Element output do wyświetlenia wyniku -->
   <output id="message"></output>
   
   <script>
     // Pobieramy element output
     const messageOutput = document.getElementById('message');
   
     // Ustawiamy wartość output
     messageOutput.value = "Witaj, świecie!";
     // Lub innerText
     messageOutput.innerText = "Witaj, świecie!";
   </script>
   

Atrybuty:

• for: Lista identyfikatorów elementów zaangażowanych w obliczenia, których wynik jest wyświetlany w <output>. Oddzielone spacjami.
• name: Nazwa elementu <output>. Używana do identyfikacji podczas wysyłania formularza.

Ważne cechy:

• Domyślnie <output> nie ma widocznej zawartości, dopóki nie zostanie mu przypisana wartość przez atrybut value lub JavaScript.
• <output> może być powiązany z elementami formularza, ale nie jest częścią danych wysyłanych podczas wysyłania formularza, chyba że przypisze się mu wartość przez atrybut value. Zamiast tego jego wartość jest zazwyczaj aktualizowana dynamicznie za pomocą JavaScript.
• Semantycznie przeznaczony jest do wyświetlania wyników, co jest korzystne dla dostępności i optymalizacji pod kątem wyszukiwarek.