Etiqueta HTML <output>
La etiqueta <output> es uno de los elementos HTML5. Define un espacio para representar el resultado de un cálculo realizado por un script o la interacción del usuario con un elemento de formulario (etiqueta <form>). La etiqueta <output> está diseñada para cálculos complejos, como los resultados de una conversión de tipo de cambio.
Cálculos con la etiqueta <output>
Para utilizar <output>, se requiere un conocimiento básico de JavaScript. Define un <input> de tipo number para informar al formulario que el usuario está ingresando números enteros. Si el usuario introduce una entrada no numérica, el script puede asignar NaN (not a number) a la salida dependiendo de la lógica de cálculo. La etiqueta <output> es ampliamente compatible con todos los navegadores modernos.
Sintaxis
La etiqueta <output> se utiliza en pares. El contenido se escribe entre las etiquetas de apertura (<output>) y cierre (</output>).
Ejemplo de la etiqueta HTML <output> con dos elementos <form>:
Ejemplo de la etiqueta HTML <output>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50" />100 +
<input type="number" id="b" value="25" /> =
<output name="x" for="a b"></output>
</form>
<p>Multiplication:</p>
<form oninput="d.value = e.valueAsNumber * f.valueAsNumber">
<input type="number" id="e" /> *
<input type="number" id="f" /> =
<output name="d" for="e f"> </output>
</form>
</body>
</html>Result
Ejemplo de la etiqueta HTML <output> con un elemento <form>:
Otro ejemplo de la etiqueta HTML <output>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
display: flex;
align-items: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)+parseInt(c.value)">
<div>
<input type="number" name="a" value="30" /> +
<input type="range" name="b" value="0" /> +
<input type="number" name="c" value="25" />
</div>
The result is:
<output name="result"></output>
</form>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| for | element_id | Define uno o más IDs de elementos separados por espacios, especificando la conexión entre el resultado del cálculo y los elementos utilizados en el mismo. |
| form | form_id | Define uno o más formularios a los que pertenece el elemento de salida. |
| name | name | Define el nombre del elemento. |
La etiqueta <output> admite los Atributos Globales y los Atributos de Eventos.
Práctica
¿Cuál es el propósito principal de la etiqueta HTML <output>?