
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 contenido | Un elemento organizativo, un elemento regular y un elemento relacionado con la forma. |
---|---|
Contenido permitido | Contenido ordinario. |
Acrónimo | Las etiquetas de inicio o finalización no se pueden omitir. |
Elementos del padre | Cualquier elemento que acepte contenido normal. |
Interfaz DOMO | HTMLOutputElement |
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
Chrome | Firefox | Edge | Safari | Ópera |
---|---|---|---|---|
10 | 4.0 | Soportado | 11 | 7 |
- Elemento summary en HTML
- Elemento details en HTML
- Elemento meter en HTML
- Elemento legend en HTML
- Elemento textarea en HTML
- Elemento select en HTML
- Elemento progress en HTML
- Elemento output en HTML
- Elemento option en HTML
- Elemento optgroup en HTML
- Elemento track en HTML
- Elemento label en HTML
- Elemento input en HTML
- Elemento form en HTML
- Elemento fieldset en HTML
- Elemento datalist en HTML
- Elemento button en HTML
- Elemento tr en HTML
- Elemento thead en HTML
- Elemento th en HTML
- Elemento tbody en HTML
- Elemento tfoot en HTML
- Elemento table en HTML
- Elemento td en HTML
- Elemento colgroup en HTML
- Elemento col en HTML
- Elemento caption en HTML
- Elemento del en HTML
- Elemento script en HTML
- Elemento noscript en HTML
- Elemento canvas en HTML
- Elemento picture en HTML
- Elemento ins en HTML
- Elemento video en HTML
- Elemento source en HTML
- Elemento param en HTML
- Elemento object en HTML
- Elemento embed en HTML
- Elemento map en HTML
- Elemento img en HTML
- Elemento audio en HTML
- Elemento area en HTML