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:
|
1 2 3 4 5 |
<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:
- En la etiqueta form encontramos el atributo oninput, en el cogemos los valores de las etiquetas ‘valor1‘ y ‘valor2’ y las sumamos.
- Los input con id ‘valor1’ y ‘valor2‘ son te tipo number HTML5, es decir que siempre contendrán valores numéricos.
- 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.