Co je to prvek <output> v HTML5?

Element <output> se používá k zobrazení výsledků výpočtů, které jsou obvykle prováděny na straně klienta.

Příklady použití:

1. Propojení s prvky formuláře:

   <!-- Deklarace vstupu pro zadání čísla -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Deklarace vstupu pro zadání jiného čísla -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Deklarace výstupu pro zobrazení výsledku, propojeného s vstupy podle id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Získání prvků
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Získání výstupního prvku
     const result = document.querySelector('output[name="result"]');
   
     // Funkce pro aktualizaci výsledku
     function updateResult() {
       // Provedení výpočtu a aktualizace hodnoty výstupu
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Přidání posluchačů událostí pro aktualizaci výsledku při změně vstupů
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Počáteční aktualizace při načtení stránky
     updateResult();
   </script>
   

2. Zobrazení výsledků pomocí JavaScriptu:

   <!-- Element výstupu pro zobrazení výsledku -->
   <output id="message"></output>
   
   <script>
     // Získání prvku výstupu
     const messageOutput = document.getElementById('message');
   
     // Nastavení hodnoty výstupu
     messageOutput.value = "Ahoj, světe!";
     // Nebo innerText
     messageOutput.innerText = "Ahoj, světe!";
   </script>
   

Atributy:

• for: Seznam identifikátorů prvků, které se podílejí na výpočtu, jehož výsledek se zobrazuje v <output>. Odděleny mezerou.
• name: Název prvku <output>. Používá se k identifikaci při odesílání formuláře.

Důležité vlastnosti:

• <output> nemá ve výchozím nastavení viditelný obsah, dokud mu není přiřazena hodnota přes atribut value nebo JavaScript.
• <output> může být propojen s prvky formuláře, ale není součástí odesílaných dat formuláře, pokud mu není přiřazena hodnota přes atribut value. Jeho hodnota se obvykle dynamicky aktualizuje pomocí JavaScriptu.
• Semanticky je určen pro zobrazování výsledků, což je užitečné pro přístupnost a optimalizaci pro vyhledávače.