¿Qué es el elemento <output> en HTML5?

El elemento <output> se utiliza para mostrar los resultados de cálculos realizados, generalmente, en el lado del cliente.

Ejemplos de uso:

1. Enlace con elementos de formulario:

   <!-- Declaramos un input para ingresar un número -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Declaramos un input para ingresar otro número -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Declaramos un output para mostrar el resultado, vinculándolo con los inputs por id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Obtenemos los elementos input
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Obtenemos el elemento output
     const result = document.querySelector('output[name="result"]');
   
     // Función para actualizar el resultado
     function updateResult() {
       // Realizamos el cálculo y actualizamos el valor del output
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Añadimos escuchas de eventos para actualizar el resultado al cambiar los inputs
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Actualización inicial del resultado al cargar la página
     updateResult();
   </script>
   

2. Mostrar resultados con JavaScript:

   <!-- Elemento output para mostrar el resultado -->
   <output id="message"></output>
   
   <script>
     // Obtenemos el elemento output
     const messageOutput = document.getElementById('message');
   
     // Asignamos un valor al output
     messageOutput.value = "¡Hola, mundo!";
     // O también con innerText
     messageOutput.innerText = "¡Hola, mundo!";
   </script>
   

Atributos:

• for: Lista de identificadores de elementos involucrados en el cálculo, cuyo resultado se muestra en <output>. Separados por espacios.
• name: Nombre del elemento <output>. Se usa para identificarlo al enviar el formulario.

Características importantes:

• Por defecto, <output> no tiene contenido visible hasta que se le asigna un valor mediante el atributo value o JavaScript.
• <output> puede estar vinculado a elementos de formulario, pero no forma parte de los datos enviados en el formulario, a menos que se le asigne un valor mediante el atributo value. En su lugar, su valor generalmente se actualiza dinámicamente con JavaScript.
• Semánticamente, está destinado a mostrar resultados, lo cual es útil para accesibilidad y optimización en buscadores.