Wat is het <output> element in HTML5?

Het <output>-element wordt gebruikt om de resultaten van berekeningen weer te geven, meestal uitgevoerd aan de clientzijde.

Voorbeelden van gebruik:

1. Koppeling met formulieronderdelen:

   <!-- Een input voor het invoeren van een getal declareren -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Een input voor het invoeren van een ander getal declareren -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Een output voor het weergeven van het resultaat declareren, gekoppeld aan de inputs via id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Elementen ophalen
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Output element ophalen
     const result = document.querySelector('output[name="result"]');
   
     // Functie om resultaat bij te werken
     function updateResult() {
       // Berekening uitvoeren en output-waarde bijwerken
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Event listeners toevoegen om resultaat bij te werken bij wijziging van inputs
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Initiële update bij het laden van de pagina
     updateResult();
   </script>
   

2. Resultaten weergeven met JavaScript:

   <!-- Output element voor het weergeven van het resultaat -->
   <output id="message"></output>
   
   <script>
     // Output element ophalen
     const messageOutput = document.getElementById('message');
   
     // Output-waarde instellen
     messageOutput.value = "Hallo, wereld!";
     // Of innerText
     messageOutput.innerText = "Hallo, wereld!";
   </script>
   

Attributen:

• for: Lijst van identificaties van de betrokken elementen bij de berekening, waarvan het resultaat wordt weergegeven in <output>. Gescheiden door spaties.
• name: Naam van het <output>-element. Wordt gebruikt voor identificatie bij het verzenden van het formulier.

Belangrijke kenmerken:

• Standaard heeft <output> geen zichtbare inhoud totdat er een waarde aan wordt toegekend via het value-attribuut of JavaScript.
• <output> kan gekoppeld worden aan formulieronderdelen, maar maakt geen deel uit van de gegevens die worden verzonden bij het indienen van het formulier, tenzij er een waarde aan wordt toegekend via het value-attribuut. In plaats daarvan wordt de waarde meestal dynamisch bijgewerkt met JavaScript.
• Semantisch is het bedoeld voor het weergeven van resultaten, wat nuttig is voor toegankelijkheid en zoekmachineoptimalisatie.