<output>
Afficher le résultat d'un calcul en temps réel
<output> — Le résultat de calcul
La balise <output> représente le résultat d'un calcul ou d'une action utilisateur. L'attribut for indique quels champs contribuent au résultat. C'est une live région implicite.
Quand l'utiliser
Tu veux afficher le total d'un panier, le résultat d'un convertisseur, le score d'un quiz ou toute valeur calculée à partir d'autres champs du formulaire.
Ce que tu gagnes
Accessibilité : <output> est une live region. Les lecteurs d'écran annoncent automatiquement les changements de valeur. L'attribut for lie le résultat à ses champs sources.
Exemple de code
<form oninput="total.value = parseInt(price.value) * parseInt(qty.value)">
<label for="price">Unit price:</label>
<input type="number" id="price" name="price" value="25">
<label for="qty">Quantity:</label>
<input type="number" id="qty" name="qty" value="2">
<label for="total">Total:</label>
<output id="total" name="total" for="price qty">50</output>
</form>Pour aller plus loin
- Les soupes de div — remplacer les
<div>par des balises sémantiques - WHATWG —
<output> - W3C — HTML spec
- MDN —
<output>