Ce este elementul <output> în HTML5?

Elementul <output> este utilizat pentru a afișa rezultatele calculărilor efectuate, de obicei, pe partea clientului.

Exemple de utilizare:

1. Legarea cu elemente de formular:

   <!-- Declarăm un input pentru introducerea unui număr -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Declarăm un input pentru introducerea altui număr -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Declarăm un output pentru afișarea rezultatului, legat de input-uri după id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Obținem elementele input
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Obținem elementul output
     const result = document.querySelector('output[name="result"]');
   
     // Funcție pentru actualizarea rezultatului
     function updateResult() {
       // Efectuăm calculul și actualizăm valoarea output
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Adăugăm ascultători de evenimente pentru actualizarea rezultatului la schimbarea input-urilor
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Actualizare inițială la încărcarea paginii
     updateResult();
   </script>
   

2. Afișarea rezultatelor cu JavaScript:

   <!-- Elementul output pentru afișarea rezultatului -->
   <output id="message"></output>
   
   <script>
     // Obținem elementul output
     const messageOutput = document.getElementById('message');
   
     // Setăm valoarea output
     messageOutput.value = "Salut, lume!";
     // Sau innerText
     messageOutput.innerText = "Salut, lume!";
   </script>
   

Atribute:

• for: Lista identificatorilor elementelor implicate în calcul, al căror rezultat este afișat în <output>. Separat prin spații.
• name: Numele elementului <output>. Este utilizat pentru identificare la trimiterea formularului.

Caracteristici importante:

• În mod implicit, <output> nu are conținut vizibil până când nu i se atribuie o valoare prin atributul value sau JavaScript.
• <output> poate fi legat de elemente de formular, dar nu face parte din datele trimise la trimiterea formularului, cu excepția cazului în care i se atribuie o valoare prin atributul value. În schimb, valoarea sa este de obicei actualizată dinamic cu JavaScript.
• Din punct de vedere semantic, este destinat pentru afișarea rezultatelor, ceea ce este util pentru accesibilitate și optimizarea pentru motoarele de căutare.