En este artículo, aprenderemos a definir una relación entre los elementos y el resultado de un cálculo. El elemento <output> en HTML es un elemento contenedor que se puede usar para mostrar el resultado de un cálculo resultante. El sitio puede inyectar el resultado en este elemento. Usaremos esta etiqueta para especificar el resultado.
El atributo de formulario del elemento de salida se utiliza para asociar los elementos que se utilizarían para el cálculo con la salida. El valor de este atributo debe ser el id de un <formulario> en el mismo documento. Cuando no se especifica este atributo, asume que se utilizará el elemento <form> antecesor en su lugar. El atributo for se usa para indicar la identificación de los elementos que contribuyeron a la salida.
El siguiente ejemplo demuestra el uso del elemento <output>.
Ejemplo:
HTML
<html> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3> How to define relationship between the calculation result, and the elements used in the calculation? </h3> <!-- The oninput attribute of <form> is used to specify the output that would be calculated --> <form oninput="val.value = parseInt(num1.value) * parseInt(num2.value)"> <!-- Input of the numbers to be multiplied --> <p><b>Number 1:</b> <input type="number" id="num1" value="10" /> </p> <p><b>Number 2:</b> <input type="number" id="num2" value="10" /> </p> <!--Show the result in the <output> element --> <p> <b>Product:</b> <output name="val" for="num1 num2"> 100 </output> </p> </form> </body> </html>
Producción:
