Un formulaire de devis affiche un tarif qui se met à jour dès que l'utilisateur change la quantité ou l'option choisie. Ce chiffre n'est ni un champ de saisie, ni un simple texte : c'est le résultat d'un calcul effectué à partir d'autres champs du formulaire, et il change à chaque interaction. Beaucoup de sites l'affichent dans un <span> quelconque mis à jour en JavaScript, ce qui fonctionne visuellement mais ne relie jamais ce résultat aux champs dont il dépend.
La balise <output> existe pour représenter précisément ce cas : le résultat d'un calcul, à l'intérieur ou à proximité d'un formulaire.
Définition
<output> représente le résultat d'un calcul ou d'une action de l'utilisateur, généralement obtenu à partir de la valeur d'un ou plusieurs champs. Contrairement à un champ de saisie, son contenu n'est jamais modifié directement par l'utilisateur : il est toujours écrit par du script, en réaction à un changement ailleurs dans le formulaire.
Son rôle est purement sémantique. Rien ne se calcule tout seul à l'intérieur d'un <output> : la balise ne fait qu'annoncer, pour le navigateur et pour les technologies d'assistance, qu'un contenu donné est le fruit d'un calcul, et de quels champs ce calcul dépend.
Syntaxe et attribut for
L'attribut for reçoit la liste des identifiants des champs qui ont servi au calcul, séparés par des espaces. Il joue pour <output> un rôle proche de celui d'un <label> associé à un champ : il déclare une relation explicite, exploitable par les technologies d'assistance, plutôt qu'une simple proximité visuelle.
| Attribut | Rôle |
|---|---|
for | Les identifiants, séparés par des espaces, des champs utilisés dans le calcul |
name | Le nom sous lequel la valeur est soumise avec le formulaire |
form | L'identifiant du formulaire associé, utile si la balise vit en dehors de lui |
Exemple concret
Voici une calculette de prix minimale : le total se recalcule à chaque changement de quantité, et l'attribut for déclare explicitement que ce total dépend du champ quantite.
<form oninput="total.value = quantite.value * 12">
<label for="quantite">Quantité</label>
<input type="number" id="quantite" name="quantite" value="1" min="1">
Total : <output for="quantite" name="total" id="total">12</output> €
</form>À chaque saisie dans le champ quantité, l'événement oninput recalcule et réécrit le contenu de <output>. Aucune bibliothèque n'est nécessaire pour ce cas simple, même si la plupart des calculettes réelles délèguent le calcul à une fonction JavaScript dédiée plutôt qu'à un attribut en ligne.
Différence avec <meter> et un simple span
<meter> affiche une mesure à l'intérieur d'une échelle bornée par un minimum et un maximum, avec des seuils de qualité. <output> n'a rien de tout cela : il ne porte aucune échelle, seulement un lien explicite vers les champs dont sa valeur dépend. Un prix total, un résultat de conversion ou une somme n'ont pas de plage bornée à afficher, ce qui exclut <meter> et pointe naturellement vers <output>.
Face à un <span> mis à jour en JavaScript, la différence est plus discrète mais réelle : <output> porte un rôle ARIA de zone live implicite dans certains navigateurs, et surtout l'attribut for documente la dépendance dans le balisage lui-même, lisible sans exécuter le script.
L'attribut for est souvent oublié parce qu'il n'a aucun effet visuel et que le calcul fonctionne très bien sans lui. C'est pourtant lui qui rend la relation utile à un lecteur d'écran ou à un outil d'analyse du code : sans lui, <output> n'apporte pas grand-chose de plus qu'un span.
Bonnes pratiques
Associer systématiquement l'attribut for aux champs source, même quand un seul champ est en cause. Donner un name à la balise si sa valeur doit être soumise avec le reste du formulaire, ce qui est rarement le cas pour un total purement informatif mais utile pour un résultat que le serveur doit recevoir. Enfin, garder le calcul lui-même en JavaScript séparé plutôt qu'en attribut en ligne dès que la logique dépasse une simple multiplication.
Questions fréquentes
output est-il envoyé avec le formulaire ?Oui, à condition de lui donner un attribut name, exactement comme un champ de saisie classique. Sans name, sa valeur reste purement visuelle et n'est jamais transmise au serveur lors de la soumission du formulaire.
output comme un champ de texte ?Oui, <output> ne porte aucune apparence imposée par défaut au-delà d'un affichage en ligne classique. Beaucoup de projets lui donnent volontairement l'apparence d'un champ désactivé, pour signaler visuellement qu'il s'agit d'un résultat et non d'une saisie possible.
output uniquement à l'intérieur d'un form ?Non, l'attribut form permet justement de relier la balise à un formulaire situé ailleurs dans la page. En pratique, la placer directement à l'intérieur du formulaire concerné reste plus simple à maintenir et évite d'avoir à gérer cet attribut supplémentaire.