Etiqueta HTML <output>

La etiqueta <output> es uno de los elementos HTML5. Define un lugar para mostrar el resultado de un cálculo realizado por un script, o el resultado de la interacción del usuario con un formulario. Normalmente se combina con controles <input> dentro de un <form>, y es muy adecuada para resultados en tiempo real como un total acumulado, un precio con descuento o una conversión de divisas.

¿Por qué usar `<output>` en lugar de un `<span>`?

Podrías mostrar un valor calculado en un <span> simple, pero <output> añade semántica y accesibilidad que un <span> no ofrece:

Es una región activa implícita. <output> tiene el rol ARIA status por defecto, lo que la convierte en una región activa educada. Cuando cambia su contenido de texto, las tecnologías de asistencia, como los lectores de pantalla, anuncian automáticamente el nuevo valor, sin necesidad de añadir atributos role ni aria-live.
Está vinculada semánticamente al formulario. Los navegadores y las herramientas tratan <output> como un elemento asociado al formulario, por lo que la relación del valor con sus entradas forma parte del significado del documento, no solo de su diseño.
El atributo for documenta la relación. Enumera los IDs de los controles que contribuyeron al resultado, expresando la intención en el marcado.

Gracias al comportamiento de región activa, un usuario con visión ve el número actualizarse mientras que un usuario de lector de pantalla lo escucha. Un <span> solo ofrece el cambio visual.

El atributo `for` y la conexión con `oninput`

El atributo for acepta una lista de IDs de elementos separados por espacios: los controles cuyos valores intervienen en el cálculo. Es puramente declarativo: indica a los lectores y a las herramientas de qué entradas depende el resultado. Por sí solo no recalcula nada.

El recálculo lo gestiona JavaScript. Colocar oninput en el <form> es un atajo habitual: el evento input se propaga hacia arriba, por lo que un único manejador en el formulario se dispara cada vez que cambia cualquier control dentro de él. Dentro de ese manejador se leen los valores de entrada y se asigna el resultado a output.value.

Ejemplo básico

En el siguiente ejemplo, un manejador oninput en el formulario mantiene el <output> sincronizado a medida que cambia cualquiera de los controles. El atributo for="a b" registra que el resultado depende de los inputs con IDs a y b.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
      <input type="range" id="a" value="50" /> +
      <input type="number" id="b" value="25" /> =
      <output name="x" for="a b">75</output>
    </form>
  </body>
</html>

Pruébalo tú mismo »

El 75 escrito entre las etiquetas es el valor predeterminado del elemento: el valor que se muestra antes de cualquier cambio de entrada, y al que <output> vuelve cuando se restablece el formulario.

Conexión con `addEventListener`

El oninput en línea es conciso, pero mezcla el comportamiento con el marcado. En proyectos reales, mantén el script separado y adjunta el manejador con addEventListener. Esta versión multiplica dos números y reutiliza un único manejador para el evento input del formulario:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form id="calc">
      <input type="number" id="e" value="6" /> &times;
      <input type="number" id="f" value="7" /> =
      <output id="result" for="e f">42</output>
    </form>

    <script>
      const form = document.getElementById("calc");
      const result = document.getElementById("result");

      form.addEventListener("input", () => {
        const e = document.getElementById("e").valueAsNumber;
        const f = document.getElementById("f").valueAsNumber;
        result.value = e * f;
      });
    </script>
  </body>
</html>

Pruébalo tú mismo »

Nótese valueAsNumber: para inputs de tipo number y range devuelve un número real (o NaN para entradas vacías o inválidas), evitando así la conversión con parseInt. Si el usuario borra un campo, el resultado se convierte en NaN; en código de producción, protege contra eso si un campo en blanco debe mostrar 0 o una cadena vacía.

El atributo `form` (outputs desasociados)

Por defecto, un <output> pertenece al formulario en el que está anidado. El atributo form permite asociar un output a un formulario aunque esté fuera del marcado de ese formulario, lo cual es útil cuando el diseño obliga a que el resultado aparezca en otro lugar de la página. Apunta form al id del formulario de destino:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form id="sum-form" oninput="total.value = Number(a.value) + Number(b.value)">
      <input type="number" id="a" value="10" /> +
      <input type="number" id="b" value="5" />
    </form>

    <p>
      The total is:
      <!-- This output lives outside the form but belongs to it -->
      <output name="total" form="sum-form" for="a b">15</output>
    </p>
  </body>
</html>

¿Se envía el valor con el formulario?

No. Aunque <output> acepta un atributo name, su valor no se envía cuando se envía el formulario. El atributo name existe para que los scripts puedan referenciar el elemento y para las API relacionadas con formularios, no para transmitir datos al servidor. Si necesitas el resultado calculado en el servidor, cópialo en un input oculto (<input type="hidden">) o recalcúlalo del lado del servidor.

Cuando se restablece el formulario, el <output> vuelve a su valor predeterminado: el contenido de texto presente en el HTML, en lugar del valor que un script asignó por última vez.

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 usados en él.
form	form_id	Define uno o más formularios a los que pertenece el elemento output.
name	name	Define el nombre del elemento.

La etiqueta <output> es compatible con los Atributos Globales y los Atributos de Eventos.

Páginas relacionadas

Etiqueta HTML <input> — los controles que alimentan valores a un <output>.
Etiqueta HTML <form> — el contenedor con el que se asocia un <output>.

Práctica

¿Cuál es el propósito principal del elemento output de HTML?

Valida los campos del formulario antes del envío.Muestra el resultado de un cálculo y actúa como región activa para que los lectores de pantalla anuncien las actualizaciones.Solo funciona en el navegador Firefox.Su valor se envía automáticamente al servidor con el formulario.Incrusta un sitio web dentro de otro sitio web.

¿Por qué usar <output> en lugar de un <span>?

El atributo for y la conexión con oninput