<output>
Le résultat d’un calcul ou d’une action de l’utilisateur, par exemple un total dans une calculatrice.
- Affichage
- inline
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant (phrasing content)
Exemple
#<form oninput="total.value = Number(minutes.value) * Number(days.value)">
<p><label>Minutes par jour <input type="number" id="minutes" value="30" min="0" max="240"></label></p>
<p><label>Jours par semaine <input type="number" id="days" value="5" min="1" max="7"></label></p>
<p>Total par semaine : <output name="total" for="minutes days">150</output> min</p>
</form>Définition et utilisation
#L’élément <output> affiche un résultat : le total d’une commande, une valeur réglée avec un curseur, le résultat d’une calculatrice. Vous changez généralement son contenu en JavaScript via la propriété value, et l’attribut for indique à partir de quels champs le résultat a été obtenu.
Les navigateurs traitent <output> comme une région de statut, ce qui permet aux lecteurs d’écran d’annoncer la nouvelle valeur sans déplacer le focus. C’est pourquoi c’est un meilleur choix qu’un simple <span> pour un résultat qui change pendant la saisie des données.
Bien que <output> fasse partie des éléments de formulaire, son contenu n’est pas envoyé au serveur. Si le serveur a besoin du résultat, qu’il le calcule lui-même.
Syntaxe
#<output name="resultat" for="champ1 champ2">0</output>Attributs
#liste d’identifiants
Les identifiants des champs dont découle la valeur, séparés par des espaces. Il décrit cette dépendance pour les technologies d’assistance, mais ne calcule rien par lui-même.name
texte
Le nom de l’élément, qui vous permet de vous y référer dans un script, par exempleform.elements.total. Malgré son nom, la valeur n’est pas envoyée avec le formulaire.
L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.
Attributs en pratique
#for
liste d’identifiantsLes identifiants des champs dont découle la valeur, séparés par des espaces. Il décrit cette dépendance pour les technologies d’assistance, mais ne calcule rien par lui-même.
<form oninput="level.value = volume.value + '%'">
<label for="volume">Volume de la voix off</label>
<input type="range" id="volume" min="0" max="100" value="60">
<output name="level" for="volume">60%</output>
</form>Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Définissez le résultat via
output.value, et non viainnerHTML. C’est plus simple et sûr, car la valeur arrive toujours dans l’élément comme simple texte. - Le texte écrit entre les balises est la valeur par défaut à laquelle
<output>revient après la réinitialisation du formulaire.
Entrées associées
#- <form>Un formulaire qui collecte des données auprès de l’utilisateur et les envoie à une adresse donnée.
- <input>Un champ de formulaire : texte, e-mail, mot de passe, nombre, date, curseur, case à cocher, fichier et bien plus encore.
- <label>L’étiquette d’un champ de formulaire. Cliquer sur l’étiquette déplace le curseur vers le champ.
- <meter>Une jauge pour une valeur dans une plage connue : espace utilisé, résultat d’un test, niveau de batterie.
- <progress>Une barre de progression pour une tâche : l’envoi d’un fichier, une installation ou l’avancement d’un cours.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.