Balise HTML <output>
La balise <output> fait partie des éléments HTML5. Elle définit un emplacement pour représenter le résultat d'un calcul effectué par un script ou l'interaction de l'utilisateur avec un élément de formulaire (balise <form>). La balise <output> est conçue pour les calculs complexes, comme les résultats d'une conversion de taux de change.
Calculer avec la balise <output>
Pour utiliser <output>, des connaissances de base en JavaScript sont requises. Définissez un <input> de type number pour indiquer au formulaire que l'utilisateur saisit des entiers. Si l'utilisateur saisit une entrée non numérique, le script peut attribuer NaN (not a number) à la sortie en fonction de la logique de calcul. La balise <output> est largement prise en charge par tous les navigateurs modernes.
Syntaxe
La balise <output> s'utilise par paires. Le contenu est écrit entre la balise d'ouverture (<output>) et la balise de fermeture (<​/output>).
Exemple de la balise HTML <output> avec deux éléments <form> :
Exemple de la balise HTML <output> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50" />100 +
<input type="number" id="b" value="25" /> =
<output name="x" for="a b"></output>
</form>
<p>Multiplication:</p>
<form oninput="d.value = e.valueAsNumber * f.valueAsNumber">
<input type="number" id="e" /> *
<input type="number" id="f" /> =
<output name="d" for="e f"> </output>
</form>
</body>
</html>Résultat
Exemple de la balise HTML <output> avec un élément <form> :
Autre exemple de la balise HTML <output> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
display: flex;
align-items: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)+parseInt(c.value)">
<div>
<input type="number" name="a" value="30" /> +
<input type="range" name="b" value="0" /> +
<input type="number" name="c" value="25" />
</div>
The result is:
<output name="result"></output>
</form>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| for | element_id | Définit un ou plusieurs identifiants d'éléments séparés par des espaces, spécifiant la connexion entre le résultat du calcul et les éléments utilisés dans le calcul. |
| form | form_id | Définit un ou plusieurs formulaires auxquels l'élément de sortie appartient. |
| name | name | Définit le nom de l'élément. |
La balise <output> prend en charge les Attributs globaux et les Attributs d'événement.
Pratique
Quel est l'objectif principal de la balise HTML <output> ?