Qu'est-ce que l'élément <output> en HTML5?

L'élément <output> est utilisé pour afficher les résultats de calculs effectués, généralement côté client.

Exemples d'utilisation :

1. Liaison avec des éléments de formulaire :

   <!-- Déclarer un input pour saisir un nombre -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Déclarer un input pour saisir un autre nombre -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Déclarer un output pour afficher le résultat, en le liant aux inputs par id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Obtenir les éléments input
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Obtenir l'élément output
     const result = document.querySelector('output[name="result"]');
   
     // Fonction pour mettre à jour le résultat
     function updateResult() {
       // Effectuer le calcul et mettre à jour la valeur de output
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Ajouter des écouteurs d'événements pour mettre à jour le résultat lors de la modification des inputs
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Mise à jour initiale du résultat lors du chargement de la page
     updateResult();
   </script>
   

2. Affichage de résultats avec JavaScript :

   <!-- Élément output pour afficher le résultat -->
   <output id="message"></output>
   
   <script>
     // Obtenir l'élément output
     const messageOutput = document.getElementById('message');
   
     // Définir la valeur de output
     messageOutput.value = "Bonjour, le monde!";
     // Ou innerText
     messageOutput.innerText = "Bonjour, le monde!";
   </script>
   

Attributs :

• for : Liste des identifiants des éléments impliqués dans le calcul, dont le résultat est affiché dans <output>. Séparés par des espaces.
• name : Nom de l'élément <output>. Utilisé pour l'identifier lors de l'envoi du formulaire.

Caractéristiques importantes :

• Par défaut, <output> n'a pas de contenu visible jusqu'à ce qu'une valeur lui soit assignée via l'attribut value ou JavaScript.
• <output> peut être lié à des éléments de formulaire, mais il ne fait pas partie des données envoyées lors de la soumission du formulaire, sauf si une valeur lui est attribuée via l'attribut value. Sa valeur est généralement mise à jour dynamiquement avec JavaScript.
• Sur le plan sémantique, il est destiné à afficher des résultats, ce qui est utile pour l'accessibilité et le référencement.