Elemento output en HTML

por
Elemento output en html

El elemento html output representa el resultado de una operación aritmética o una de las acciones del usuario. Ejemplo interactivo (usando JavaScript) en el que el elemento <output> se usa para mostrar el resultado de un cálculo realizado por el usuario:

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="range" name="b" value="50"> +
  <input type="number" name="a" value="10"> =
  <output name="result">60</output>
</form>

Etiqueta html output

Clasificaciones de contenidoUn elemento organizativo, un elemento regular y un elemento relacionado con la forma.
Contenido permitidoContenido ordinario.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido normal.
Interfaz DOMOHTMLOutputElement

Características

En este elemento html output se pueden utilizar propiedades globales. Este elemento se agregó por primera vez a HTML5 y no estaba presente anteriormente en HTML 4.

for

Una lista de los ID de los otros elementos, que indica que esos elementos contribuyeron al resultado que se muestra en ese elemento. En este ejemplo usamos la propiedad for para indicar que los dos campos que han contribuido al resultado que se muestra en el elemento <output>:

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="range" name="b" value="50"> +
  <input type="number" name="a" value="10"> =
  <output name="result" for="a b">60</output>
</form>

form

Esta propiedad es el valor de propiedad del id elemento con el <form> que está relacionado este elemento, el valor predeterminado es el valor de propiedad del elemento padre id más cercano <form> de ese elemento.

Esta propiedad nos permite colocar el elemento <output> en cualquier lugar del documento y no tiene por qué ser un elemento secundario del elemento <form>.

En este ejemplo, usamos la propiedad form para indicar que este elemento es un elemento secundario del formulario form1:

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)" id="form1">
  <input type="range" name="b" value="50"> +
  <input type="number" name="a" value="10"> =
</form>
<output name="result" form="form1">60</output>

name

El nombre de este elemento.

Formato predeterminado

La mayoría de los navegadores muestran el elemento <output> con la propiedad establecida display en inline:

output {
  display: inline;
}

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
104.0Soportado117