Fast HTML5: 17, Output
0702/12
La anterior entrega, Vídeo, en esta… hablaremos sobre el elemento <output>.
Hace algunos posts, hablamos de tags específicos para formularios, pues bien, este es otro de ellos (y aún quedan algunos por salir), si podéis pegad un ojo a los anteriores posts con elementos de formularios, como fueron:
Vamos pues como siempre a la descripción de output en la documentación:
The output element represents the result of a calculation.
Esta es sencilla, ¿verdad?
No deja lugar a mucho que hablar, aunque como es algo nuevo tenemos que hacerlo, obviamente ;-)
<body>
...
<form>
<input name="edad" id="edad" type="range" min="0" max="40">
<output for="edad" onforminput="edad.value">0</output>
</form>
...
</body>
En el “for” (del input ;-)) colocaremos una lista de ID’s de los elementos que serán calculados, y onforminput es un nuevo atributo, y cuidado porque en algunos casos está deprecated.
Vamos a por una suma sencilla para que veáis cómo funciona (fijaos en el type number):
<body>
...
<form oninput="resultado.value = parseInt(valor1.value) + parseInt(valor2.value)">
<input type="number" name="valor1" />
<input type="number" name="valor2" />
<output name="resultado">0</output>
</form>
...
</body>
Cuando pongamos valores a valor1 y valor2, en resultado se visionará la suma (evidentemente, si el navegador reconoce todos los elementos y atributos, recordad la página Can I Use).
Seguiremos con más elementos de formulario para montar uno grande incluyendo todos los nuevos tags y atributos ;-) Pero para abrir boca aquí tenéis algunos ejemplos avanzados utilizando output.
