Cos'è l'elemento <output> in HTML5?

L'elemento <output> viene utilizzato per visualizzare i risultati dei calcoli eseguiti, generalmente lato client.

Esempi di utilizzo:

1. Collegamento con elementi di modulo:

   <!-- Dichiarare un input per inserire un numero -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Dichiarare un input per inserire un altro numero -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Dichiarare un output per visualizzare il risultato, collegandolo agli input tramite id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Ottenere gli elementi input
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Ottenere l'elemento output
     const result = document.querySelector('output[name="result"]');
   
     // Funzione per aggiornare il risultato
     function updateResult() {
       // Eseguire il calcolo e aggiornare il valore dell'output
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Aggiungere ascoltatori di eventi per aggiornare il risultato al cambiare degli input
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Aggiornamento iniziale del risultato al caricamento della pagina
     updateResult();
   </script>
   

2. Visualizzazione dei risultati con JavaScript:

   <!-- Elemento output per visualizzare il risultato -->
   <output id="message"></output>
   
   <script>
     // Ottenere l'elemento output
     const messageOutput = document.getElementById('message');
   
     // Impostare il valore dell'output
     messageOutput.value = "Ciao, mondo!";
     // Oppure innerText
     messageOutput.innerText = "Ciao, mondo!";
   </script>
   

Attributi:

• for: Lista degli identificatori degli elementi coinvolti nel calcolo, il cui risultato viene mostrato in <output>. Separati da spazi.
• name: Nome dell'elemento <output>. Usato per identificarlo durante l'invio del modulo.

Caratteristiche importanti:

• Per impostazione predefinita, <output> non ha contenuto visibile fino a quando non gli viene assegnato un valore tramite l'attributo value o JavaScript.
• <output> può essere collegato a elementi di modulo, ma non fa parte dei dati inviati con il modulo, a meno che non gli venga assegnato un valore tramite l'attributo value. Altrimenti, il suo valore viene aggiornato dinamicamente con JavaScript.
• Semantiquement, è destinato a visualizzare risultati, il che è utile per l'accessibilità e l'ottimizzazione per i motori di ricerca.