<output> : l'élément de sortie

Attributs

Cet élément inclut les attributs universels.

for

Une liste d'id d'autres éléments, séparés par des espaces, qui ont joué un rôle dans le calcul (en tant que valeurs d'entrée ou autrement).

form

L'élément <form> auquel associer la sortie (son propriétaire de formulaire). La valeur de cet attribut doit être l'id d'un <form> dans le même document. (Si cet attribut n'est pas défini, l'élément <output> est associé à son ancêtre <form>, s'il existe.)

Cet attribut permet d'associer des éléments <output> à des <form> n'importe où dans le document, pas seulement à l'intérieur d'un <form>. Il peut aussi remplacer un ancêtre <form>. Le nom et le contenu de l'élément <output> ne sont pas envoyés lors de la soumission du formulaire.

name

Le nom de l'élément. Utilisé dans l'API form.elements.

La valeur, le nom et le contenu de l'élément <output> ne sont PAS envoyés lors de la soumission du formulaire.

Accessibilité

De nombreux navigateurs implémentent cet élément comme une région aria-live. Les technologies d'assistance annoncent ainsi les résultats des interactions de l'utilisateur·ice affichés dans cet élément sans exiger que la sélection soit déplacée depuis les contrôles qui produisent ces résultats.

Exemples

Le formulaire qui suit fournit un curseur dont la valeur peut aller de 0 à 100 ainsi qu'un élément HTML <input> dans lequel on peut saisir un deuxième nombre. Les deux nombres sont additionnés et le résultat est affiché dans l'élément <output> et est actualisé lorsqu'une des deux valeurs est modifiée.

<form id="formulaire-exemple">
  <input type="range" name="b" value="50" /> +
  <input type="number" name="a" value="10" /> =
  <output name="resultat" for="a b">60</output>
</form>

const form = document.getElementById("formulaire-exemple");
const a = form.elements["a"];
const b = form.elements["b"];
const result = form.elements["resultat"];

function updateResult() {
  const aValue = a.valueAsNumber;
  const bValue = b.valueAsNumber;
  result.value = aValue + bValue;
}

form.addEventListener("input", updateResult);

updateResult();

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs