Balise HTML <output>

La balise <output> est l'un des éléments HTML5. Elle définit un emplacement pour afficher le résultat d'un calcul effectué par un script, ou le résultat de l'interaction d'un utilisateur avec un formulaire. Elle est généralement associée aux contrôles <input> à l'intérieur d'un <form>, et convient parfaitement aux résultats en temps réel comme un total cumulé, un prix après remise ou une conversion de taux de change.

Pourquoi utiliser `<output>` plutôt qu'un `<span>` ?

Vous pourriez afficher une valeur calculée dans un simple <span>, mais <output> apporte une sémantique et une accessibilité qu'un <span> ne possède pas :

C'est une région dynamique implicite. <output> possède par défaut le rôle ARIA status, ce qui en fait une région dynamique de type « poli ». Lorsque son contenu textuel change, les technologies d'assistance telles que les lecteurs d'écran annoncent automatiquement la nouvelle valeur — sans avoir à ajouter d'attribut role ou aria-live.
Il est sémantiquement lié au formulaire. Les navigateurs et les outils traitent <output> comme un véritable élément associé au formulaire, de sorte que la relation de la valeur avec ses entrées fait partie de la signification du document, pas seulement de sa mise en page.
L'attribut for documente la relation. Il liste les identifiants des contrôles qui ont contribué au résultat, exprimant l'intention dans le balisage.

Grâce au comportement de région dynamique, un utilisateur voyant voit la mise à jour du nombre pendant qu'un utilisateur de lecteur d'écran l'entend se mettre à jour. Un <span> ne vous offre que le changement visuel.

L'attribut `for` et le câblage `oninput`

L'attribut for prend une liste d'identifiants d'éléments séparés par des espaces — les contrôles dont les valeurs alimentent le calcul. Il est purement déclaratif : il indique aux lecteurs et aux outils de quelles entrées dépend le résultat. Il ne recalcule pas quoi que ce soit par lui-même.

Le recalcul est piloté par JavaScript. Placer oninput sur le <form> est un raccourci courant : l'événement input remonte, donc un seul gestionnaire sur le formulaire se déclenche chaque fois que n'importe quel contrôle en son sein change. À l'intérieur de ce gestionnaire, vous lisez les valeurs des entrées et affectez le résultat à output.value.

Exemple de base

Dans l'exemple ci-dessous, un gestionnaire oninput sur le formulaire maintient <output> synchronisé dès que l'un ou l'autre des contrôles change. L'attribut for="a b" indique que le résultat dépend des entrées ayant les identifiants a et b.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
      <input type="range" id="a" value="50" /> +
      <input type="number" id="b" value="25" /> =
      <output name="x" for="a b">75</output>
    </form>
  </body>
</html>

Essayez vous-même »

Le 75 écrit entre les balises est la valeur par défaut de l'élément — la valeur affichée avant tout changement de saisie, et la valeur à laquelle <output> est restauré lors de la réinitialisation du formulaire.

Câblage avec `addEventListener`

oninput en ligne est concis mais mélange le comportement avec le balisage. Dans de vrais projets, gardez le script séparé et attachez le gestionnaire avec addEventListener. Cette version multiplie deux nombres et réutilise un seul gestionnaire pour l'événement input du formulaire :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form id="calc">
      <input type="number" id="e" value="6" /> &times;
      <input type="number" id="f" value="7" /> =
      <output id="result" for="e f">42</output>
    </form>

    <script>
      const form = document.getElementById("calc");
      const result = document.getElementById("result");

      form.addEventListener("input", () => {
        const e = document.getElementById("e").valueAsNumber;
        const f = document.getElementById("f").valueAsNumber;
        result.value = e * f;
      });
    </script>
  </body>
</html>

Essayez vous-même »

Notez valueAsNumber : pour les entrées de type number et range, il retourne un nombre réel (ou NaN pour une entrée vide ou invalide), ce qui évite la conversion parseInt. Si l'utilisateur vide un champ, le résultat devient NaN ; protégez-vous contre cela dans le code de production si une valeur vide doit afficher 0 ou une chaîne vide.

L'attribut `form` (sorties dissociées)

Par défaut, un <output> appartient au formulaire dans lequel il est imbriqué. L'attribut form vous permet d'associer une sortie à un formulaire même lorsqu'elle se trouve en dehors du balisage de ce formulaire — utile lorsque la mise en page oblige le résultat à se trouver ailleurs sur la page. Faites pointer form vers l'id du formulaire cible :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form id="sum-form" oninput="total.value = Number(a.value) + Number(b.value)">
      <input type="number" id="a" value="10" /> +
      <input type="number" id="b" value="5" />
    </form>

    <p>
      The total is:
      <!-- This output lives outside the form but belongs to it -->
      <output name="total" form="sum-form" for="a b">15</output>
    </p>
  </body>
</html>

La valeur est-elle soumise avec le formulaire ?

Non. Même si <output> accepte un attribut name, sa valeur n'est pas envoyée lors de la soumission du formulaire. name existe pour que les scripts puissent référencer l'élément et pour les API liées aux formulaires, et non pour transmettre des données au serveur. Si vous avez besoin du résultat calculé côté serveur, copiez-le dans un champ masqué (<input type="hidden">) ou recalculez-le côté serveur.

Lors de la réinitialisation du formulaire, <output> revient à sa valeur par défaut — le contenu textuel présent dans le HTML — plutôt qu'à la dernière valeur assignée par un script.

Attributs

Attribut	Valeur	Description
for	element_id	Définit un ou plusieurs identifiants d'éléments séparés par des espaces, précisant la connexion entre le résultat du calcul et les éléments utilisés dans le calcul.
form	form_id	Définit un ou plusieurs formulaires auxquels l'élément output appartient.
name	name	Définit le nom de l'élément.

La balise <output> prend en charge les attributs globaux et les attributs d'événement.

Pages associées

Balise HTML <input> — les contrôles qui alimentent les valeurs dans un <output>.
Balise HTML <form> — le conteneur auquel un <output> est associé.

Pratique

Quel est le but principal de l'élément HTML output ?

Il valide les champs du formulaire avant la soumission.Il affiche le résultat d'un calcul et agit comme une région dynamique pour que les lecteurs d'écran annoncent les mises à jour.Il ne fonctionne que dans le navigateur Firefox.Sa valeur est automatiquement soumise au serveur avec le formulaire.Il intègre un site web dans un autre site web.

Pourquoi utiliser <output> plutôt qu'un <span> ?

L'attribut for et le câblage oninput