Was ist das Element <output> in HTML5?

Das <output>-Element wird verwendet, um die Ergebnisse von Berechnungen anzuzeigen, die in der Regel auf der Client-Seite durchgeführt werden.

Verwendungsbeispiele:

1. Verbindung mit Formular-Elementen:

   <!-- Deklarieren eines Inputs zur Eingabe einer Zahl -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Deklarieren eines Inputs zur Eingabe einer weiteren Zahl -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Deklarieren eines output-Elements zur Anzeige des Ergebnisses, verbunden mit den Inputs per id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Elementeingaben abrufen
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Output-Element abrufen
     const result = document.querySelector('output[name="result"]');
   
     // Funktion zur Aktualisierung des Ergebnisses
     function updateResult() {
       // Berechnung durchführen und den Wert des Outputs aktualisieren
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Ereignislistener hinzufügen, um das Ergebnis bei Änderungen der Inputs zu aktualisieren
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Anfangsaktualisierung beim Laden der Seite
     updateResult();
   </script>
   

2. Anzeige von Ergebnissen mit JavaScript:

   <!-- Output-Element zur Anzeige des Ergebnisses -->
   <output id="message"></output>
   
   <script>
     // Output-Element abrufen
     const messageOutput = document.getElementById('message');
   
     // Wert des Outputs setzen
     messageOutput.value = "Hallo, Welt!";
     // Oder innerText
     messageOutput.innerText = "Hallo, Welt!";
   </script>
   

Attribute:

• for: Liste der IDs der Elemente, die an der Berechnung beteiligt sind, deren Ergebnis im <output> angezeigt wird. Durch Leerzeichen getrennt.
• name: Name des <output>-Elements. Wird zur Identifikation beim Absenden des Formulars verwendet.

Wichtige Eigenschaften:

• Standardmäßig hat <output> keinen sichtbaren Inhalt, bis ihm ein Wert durch das Attribut value oder JavaScript zugewiesen wird.
• <output> kann mit Formularelementen verbunden sein, ist aber kein Teil der beim Absenden des Formulars übertragenen Daten, es sei denn, ihm wird ein Wert durch das Attribut value zugewiesen. Stattdessen wird sein Wert in der Regel dynamisch mit JavaScript aktualisiert.
• Semantisch ist es für die Anzeige von Ergebnissen vorgesehen, was für Barrierefreiheit und Suchmaschinenoptimierung nützlich ist.