<output>

Description

L’élément <output> affiche le résultat d’un calcul ou d’une action effectuée sur d’autres contrôles de formulaire. Il est sémantiquement lié aux contrôles sources via l’attribut for. Son contenu est mis à jour via JavaScript. Les technologies d’assistance peuvent l’annoncer quand il change.

Syntaxe

<output id="resultat" for="a b">0</output>

Exemples

Calculateur de total :

<form oninput="total.value = parseInt(qte.value) * parseFloat(prix.value)">
  <label>Quantité : <input type="number" id="qte" name="qte" value="1" min="1"></label>
  <label>Prix unitaire : <input type="number" id="prix" name="prix" value="10.00" step="0.01"></label>
  <p>Total : <output id="total" name="total" for="qte prix">10.00</output> €</p>
</form>

Résultat d’un curseur :

<label for="volume">Volume :</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50"
  oninput="affichage.value = this.value">
<output id="affichage" for="volume">50</output>

Attributs spécifiques

Attribut	Type	Description
for	string	IDs des contrôles source séparés par des espaces.
form	string	ID du formulaire associé.
name	string	Nom du champ (la valeur est soumise avec le formulaire).

Notes

<output> et live region : par défaut, <output> a le rôle ARIA status avec aria-live="polite". Les lecteurs d’écran annoncent les changements de valeur de manière non interruptive.