HTML5 output

On utilise la balise <output> au sein de formulaires pour afficher le résultat d'un calcul à partir des autres champs, il peut être utilisé librement dans tous les navigateurs.

<output value=100> 100 </output>

Output HTML5

Avec un exemple, nous pourrions utiliser la balise <output> pour représenter le résultat d'un simple calcul mathématique basé sur un formulaire.

<form>
  <input name="num1" id="num1" type="number"> * 
  <input name="num2" id="num2" type="number"> = 
  <output for="num1 num2"></output>
</form>

Notez que nous utilisons un nouveau type de la balise <input> : number. Donc:

<form oninput="result.value = num1.value * num2.value"> 
   <input name="num1" id="num1" type="number"> *
   <input name="num2" id="num2" type="number"> = 
   <output for="num1 num2" name="result"></output>
</form>

* =

Nous pouvons aussi utiliser JavaScript pour mettre à jour la valeur de sortie <output>.

JavaScript:

var form = document.querySelector('form'),
num1 = form.num1, 
num2 = form.num2, 
output = document.querySelector('output');
    [].forEach.call(document.querySelectorAll('input'), function(el) { 
    el.addEventListener('change', function() {
        output.value = ~~num1.value * ~~num2.value; 
    });
});

JQuery:

var form = $('form'), 
num1 = form[0].num1, 
num2 = form[0].num2, 
output = $('output');
form.on('change', 'input', function() { 
    output.val( ~~num1.value * ~~num2.value );
});

Toujours même résultat.