El elemento <output> es de especial utilidad a la hora de representar la salida de un cálculo realizado por un programa. En general se usa el lenguaje JavaScript para indicar el proceso del cálculo. Los valores del cálculo son introducidos en los controles de entrada de información de un formulario.
El contenido permitido en este elemento serán elementos de línea, que deberán estar entre las etiquetas <output> (de apertura) y </output> (de cierre). A su vez, y como es de esperar, el elemento <output> puede estar contenido (elemento hijo) dentro de otros elementos que permitan elementos de línea.
Ejemplo de código HTML con una salida de cálculo:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" name="a" value="3"> +
<input type="number" id="b" name="b" value="5"> =
<output name="result" for="a b">8</output>
</form>
Se usan dos elementos <input> dentro del formulario para establecer dos variables cuyos valores serán sumados y representados a través del valor <output>. El primer <input> tiene el valor 3 y el segundo el valor 5. El resultado será 8. Modifica los valores y observa el resultado:
Tal y como se puede observar en el código de ejemplo, se usa un evento con código JavaScript para llevar a cabo la operación matemática. En este caso, el evento oninput provoca que el cálculo se realice cada vez que el valor de los controles interactivos son modificados por parte del usuario.
El elemento <output> es puramente semántico, por lo que se recomienda su uso siempre que se quiera mostrar los resultados de un cálculo o de un proceso algorítmico llevado a cabo en el documento HTML.
Atributos del elemento <output>
El elemento <output> puede hacer uso de los atributos globales, tales como class, id, style o title. Sin embargo, este elemento HTML también tiene algunos atributos específicos que conviene conocer para poder usarlo de forma conveniente; este es el caso sobretodo del atributo for.
El atributo ‘for’
El atributo for debe contener una lista de identificadores separados por espacios. Cada uno de los identificadores debe coincidir con el atributo id de los elementos de control usados en el cálculo o proceso.
El atributo ‘form’
El atributo form se utiliza para relacionar la salida del cálculo con el formulario al que pertenece. En este sentido, el valor de este atributo debe coincidir con el valor del atributo id del elemento <form>. Este atributo ayuda a definir la pertenencia de los controles en formularios distantes.
El atributo ‘name’
Mediante el atributo name se asigna un nombre al control interactivo. El nombre introducido como valor de este atributo será enviado al servidor a través de la pareja de datos «nombre-valor», tal y como ocurre con el resto de controles.
