Referencia de etiquetas

Etiqueta output en HTML: resultados de cálculos

La etiqueta <output> en HTML representa el resultado de un cálculo o de una acción del usuario. Úsala, por ejemplo, para mostrar el total obtenido al multiplicar una cantidad por un precio. Identifica el resultado dentro de la página, pero no realiza el cálculo por sí sola: necesita JavaScript o un valor preparado previamente.

<label for="total">Total</label>
<output id="total" for="cantidad precio">0</output>

Verás «Total 0». El for de <label> nombra el resultado mediante su id; el de <output> enumera los elementos que intervienen en él. cantidad y precio son los IDs de los controles que incluiremos en el ejemplo completo. Este fragmento aislado no multiplica nada; para probar sus asociaciones, conserva esos controles y sustituye el párrafo del resultado en el documento siguiente.

Sintaxis y contexto válido

Escribe <output>resultado</output> con apertura y cierre. Puede estar dentro de un formulario o fuera de él, en contextos que admitan contenido de frase, como un párrafo. También contiene contenido de frase: texto o elementos como <span> y <strong>, no una lista o una tabla completa. Estas reglas proceden del HTML Living Standard para <output>.

Atributos for, form y name

Los tres atributos específicos tienen funciones distintas:

Atributo	Función y ejemplo
`for`	Relaciona el resultado con IDs existentes, distintos y separados por espacios: `for="cantidad precio"`. No admite una expresión como `cantidad * precio`.
`form`	Asocia el resultado al formulario cuyo `id` indica: `form="compra"`. Permite colocar el resultado fuera de ese formulario. Sin él, se asocia al formulario antecesor, si existe.
`name`	Identifica el resultado en la colección `form.elements`: `name="total"`. No lo convierte en un dato enviado.

La referencia de atributos de MDN detalla estas asociaciones. Ninguno de esos atributos es necesario para mostrar texto, aunque aportan relaciones útiles.

id, class y lang son atributos globales. color es una propiedad CSS; .value y .defaultValue son propiedades de JavaScript. A diferencia de <input>, no se establece el resultado con un atributo HTML value: escríbelo entre las etiquetas o actualiza .value.

Ejemplo práctico: calculadora de cantidad y precio

Guarda este documento en UTF-8 como calculadora.html y ábrelo en el navegador. Incluye todo el HTML y JavaScript necesario, sin CSS, recursos externos ni servidor. Es una calculadora local: inspeccionar los datos no envía nada ni guarda información.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Calculadora de una compra</title>
  </head>
  <body>
    <h1>Calculadora de una compra</h1>
    <p>Multiplica cantidad por precio unitario en pesos mexicanos.</p>
    <form id="compra">
      <p>
        <label for="cantidad">Cantidad (0 a 1000 unidades)</label>
        <input id="cantidad" name="cantidad" type="number"
               min="0" max="1000" step="1" value="2" required>
      </p>
      <p>
        <label for="precio">Precio unitario (0 a 1000000 MXN)</label>
        <input id="precio" name="precio" type="number"
               min="0" max="1000000" step="0.01" value="12.50" required>
      </p>
      <p>
        <label for="total">Total (MXN)</label>
        <output id="total" name="total" for="cantidad precio">25.00 MXN</output>
      </p>
      <p>
        <button id="inspeccionar" type="button" disabled>Inspeccionar datos</button>
        <button type="reset">Restablecer</button>
      </p>
      <pre id="datos">Todavía no se han inspeccionado los datos.</pre>
    </form>
    <noscript>
      <p>Sin JavaScript el total es solo el ejemplo inicial:
         2 × 12.50 = 25.00 MXN. Si cambias los campos, multiplica
         sus valores manualmente; el total mostrado no se actualiza.</p>
    </noscript>

    <script>
      const formulario = document.getElementById("compra");
      const cantidad = document.getElementById("cantidad");
      const precio = document.getElementById("precio");
      const total = document.getElementById("total");
      const boton = document.getElementById("inspeccionar");
      const datos = document.getElementById("datos");

      function actualizarTotal() {
        if (cantidad.value === "" || precio.value === "") {
          total.value = "Completa cantidad y precio.";
          return;
        }
        if (!cantidad.validity.valid || !precio.validity.valid) {
          total.value = "Revisa los rangos y los decimales permitidos.";
          return;
        }
        const unidades = Number(cantidad.value);
        const precioUnitario = Number(precio.value);
        total.value = (unidades * precioUnitario).toFixed(2) + " MXN";
      }

      formulario.addEventListener("input", actualizarTotal);
      formulario.addEventListener("submit", (evento) => evento.preventDefault());
      formulario.addEventListener("reset", () => {
        datos.textContent = "Todavía no se han inspeccionado los datos.";
      });
      boton.addEventListener("click", () => {
        const campos = new FormData(formulario);
        datos.textContent = JSON.stringify(Object.fromEntries(campos), null, 2);
      });
      boton.disabled = false;
      actualizarTotal();
    </script>
  </body>
</html>

El evento input recalcula al escribir o usar las flechas del control. Number convierte las cadenas de los campos en números; comprobar primero la cadena vacía evita tratarla como cero. Los límites y pasos distinguen cantidades enteras de precios con hasta dos decimales. toFixed(2) presenta dos decimales; este ejercicio no implementa las reglas de redondeo de un sistema de facturación.

Prueba estos pasos con el ratón y después con Tab, Shift+Tab y los botones mediante Enter o Espacio:

Comprueba el total inicial: 2 × 12.50 = 25.00 MXN.
Cambia la cantidad a 3: debe aparecer 37.50 MXN.
Vacía un campo: aparece «Completa cantidad y precio». Prueba una cantidad negativa o fraccionaria: aparece la instrucción de revisar rangos y decimales.
Restablece el formulario y activa «Inspeccionar datos». Se muestran cantidad: "2" y precio: "12.50"; no aparece total, aunque tiene name.
Desactiva JavaScript y recarga: permanece el ejemplo inicial, la explicación permite calcular manualmente y el botón de inspección queda deshabilitado. Los campos y «Restablecer» conservan su comportamiento nativo.

Calcular y restablecer el resultado

total.value cambia el texto mostrado y conserva el valor predeterminado para restablecerlo. En este ejemplo, ese valor procede del contenido inicial: 25.00 MXN. El botón type="reset" devuelve los campos y el resultado a sus valores iniciales; no hace falta recalcular durante el evento reset.

Puedes consultar o cambiar el valor de restablecimiento con total.defaultValue. Actualizar directamente textContent no expresa la misma operación: antes de asignar .value, el texto también determina el valor predeterminado. MDN explica los modos y propiedades de HTMLOutputElement.

Si cambias el texto inicial, revisa también que corresponda a los valores iniciales de los campos. Si retiras <output>, desaparece el resultado y el script falla al intentar actualizar un elemento inexistente. Reemplazarlo por <span> exige adaptar el script a textContent y revisar su nombre accesible, los anuncios y el restablecimiento: asignar .value a un <span> no cambia su texto visible.

Output frente a input, span y samp

Usa un <input> cuando la persona deba introducir o editar un dato; <output> presenta el resultado de la aplicación. Un elemento <span> agrupa texto sin esa semántica. <samp> sirve para citar una salida de otro programa, por ejemplo un mensaje de terminal, en lugar de presentar el cálculo actual de esta calculadora.

¿Output calcula automáticamente? No. Ni for ni name ejecutan operaciones; aquí lo hace actualizarTotal. Si el resultado no cambia, comprueba que JavaScript esté activo, que los IDs coincidan y que el listener input se haya registrado.

¿Se envía el resultado con el formulario? No. Su asociación con el <form> permite acceder a él, pero FormData lo excluye. Si tu aplicación necesita enviarlo, utiliza otro campo apropiado y valida o recalcula el resultado en el servidor; el total calculado en el navegador puede modificarse.

Accesibilidad y compatibilidad

Conserva las etiquetas <label> de los campos y del resultado. for en <output> relaciona las entradas, pero no sustituye su nombre accesible. El mapeo de accesibilidad HTML asigna a <output> el rol status; los cambios pueden anunciarse sin mover el foco. No añadas otro role="status" ni una región viva que repita el mismo total.

Prueba las actualizaciones con el navegador y lector de pantalla que vaya a usar tu público: deben comunicar un resultado comprensible sin interrumpir la escritura ni duplicarlo. El anuncio exacto depende de esa combinación; comprobar el rol accesible no demuestra por sí solo qué se escuchará. El ejemplo conserva el foco en el campo que estás editando y muestra los errores como texto.

Consulta del 3 de octubre de 2026: MDN clasifica <output> como ampliamente disponible. El soporte del elemento y sus propiedades no garantiza anuncios idénticos en todas las tecnologías de asistencia. La fórmula y el valor inicial siguen siendo comprensibles cuando el cálculo automático no está disponible.