HTML5 output: Operaciones matemáticas en tiempo real en tu formulario

La etiqueta HTML5 output va a facilitarnos el trabajo a la hora de realizar operaciones matemáticas en los formularios.

De esta manera seguimos analizando las nuevas etiquetas e input de HTML5. Veamos cual es la definición de HTML5 output según la WHATWG:

La etiqueta output representa el resultado de un cálculo

Hasta hace bien poco, este tipo de cáculos los veníamos haciendo con JS o con lenguajes de servidor tras el envío del formulario.

Os muestro la siguiente imagen para que os hagáis un idea de su utilidad.

Ejemplo de HTML5 output

Voy a realizar un sencillo ejemplo de HTML5 ouput para que probéis su funcionamiento, aquí el código:

<form method="POST" oninput="resultado.value=parseInt(valor1.value)+parseInt(valor2.value)">
    <input type="number" id="valor1" value="0"> +
    <input type="number" id="valor2" value="0"> =
    <output name="resultado" for="valor1 valor2"></output>
</form>

El ejemplo lo he probado en Google Chrome, os voy a explicar el funcionamiento del formulario:

1. En la etiqueta form encontramos el atributo oninput, en el cogemos los valores de las etiquetas ‘valor1‘ y ‘valor2’ y las sumamos.
2. Los input con id ‘valor1’ y ‘valor2‘ son te tipo number HTML5, es decir que siempre contendrán valores numéricos.
3. Por último la etiqueta HTML5 output con name ‘resultado‘ obtiene el valor de la suma de ‘valor1’ y ‘valor2′ en tiempo real, es decir, según se escriben los valores vas obteniendo el cálculo.

Listado de los nuevos input y etiquetas HTML5

En esta url tenéis el listado completo de los nuevos input y etiquetas de HTML5.

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.