Accueil    HTML    Balise Output
 



balise output  Balise OUTPUT : résultat

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



La balise <output> est un élément utilisable au sein de formulaires pour afficher le résultat d'un calcul à partir de champs saisissables par l'utilisateur. Ce champ est en lecture seule et s'actualise dès que l'une des valeurs sur laquelle le calcul se base change.

Sa mise en place se fait dans un formulaire et son calcul s'effectue sur l'évènement "oninput" de celui-ci. La méthode de calcul est appelée au moment où cet évènement est déclenché (soit directement soit dans une fonction javascript).



Propriétés pour la balise output :




Propriétés Définition Valeurs
for Etabli la relation avec les champs utilisés pour le calcul Identifiants
form Indique quel formulaire contient l'élément output Identifiant
name Nom associé à la balise output Identifiant


Exemple d'utilisation de la balise output :




Exemple de calcul avec des zones de saisie libres

<form name="form-calcul1" oninput="resultat1.value = parseInt(valeur1.value) * parseInt(valeur2.value);">
   <input type="text" name="valeur1" value="15" /> *
   <input type="text" name="valeur2" value="10" /> =
   <output for="valeur1 valeur2" name="resultat1">150</output>
</form>


Le même exemple avec des saisies numériques

<form name="form-calcul2" oninput="resultat2.value = valeur3.value * valeur4.value;">
   <input type="number" name="valeur3" value="15" /> *
   <input type="number" name="valeur4" value="10" /> =
   <output for="valeur3 valeur4" name="resultat2">150</output>
</form>


Un dernier exemple avec le type range

<form onsubmit="return false" oninput="resultat.value = echelle.valueAsNumber;">
   <div style="border:solid 1px silver; padding:5px;">
      <input id="echelle" name="echelle" type="range" min="0" max="20" value="10" style="width:200px;" />
      <output id="resultat" for="echelle" style="margin:0px; padding:0px;">10</output>/20
   </div>
</form>


Exemple de calcul avec des zones de saisie libres

* = 150


Le même exemple avec des saisies numériques

* = 150


Un dernier exemple avec le type range

10/20