¿Qué es la etiqueta «output» y cómo se puede usar en formularios?

La etiqueta <output> es un elemento introducido en HTML5 que se utiliza para mostrar el resultado de un cálculo o una acción del usuario, generalmente dentro de un formulario.

Su propósito es semántico: indicar que el contenido de esta etiqueta es una salida de datos generada por la interacción del usuario con otros controles.

Características principales de <output>:

• Semántica: Define explícitamente una sección de la página como el lugar donde se mostrará un resultado.
• Actualización dinámica: Su contenido se actualiza comúnmente mediante JavaScript, basándose en los valores de otros campos del formulario.
• Accesibilidad: Puede asociarse con los elementos de entrada que contribuyen a su valor mediante el atributo for.

Atributos comunes:

• for: Contiene una lista de ids (separados por espacios) de otros elementos del formulario cuyos valores se utilizaron en el cálculo del resultado. Esto crea una relación explícita que puede ser útil para las tecnologías de asistencia.
• form: Asocia el elemento <output> con un formulario específico (mediante el id del formulario). Útil si <output> no está anidado directamente dentro del <form>.
• name: Al igual que otros controles de formulario, el name permite que el valor del <output> sea enviado junto con el formulario (aunque su uso principal es para mostrar resultados en la página, no necesariamente para enviar su valor).

Ejemplo de uso:

Imagina un formulario donde el usuario selecciona un valor en un control deslizante (<input type="range">) y quieres mostrar ese valor numéricamente, o el resultado de una operación con él.

<form oninput="resultado.value = parseInt(a.value) + parseInt(b.value)">
  <fieldset>
    <legend>Suma de dos números:</legend>
    
    <label for="num_a">Número A:</label>
    <input type="number" id="num_a" name="a" value="50">
    +
    <label for="num_b">Número B:</label>
    <input type="number" id="num_b" name="b" value="50">
    =
    <output name="resultado" for="num_a num_b">100</output>
  </fieldset>
</form>
Lenguaje del código: PHP (php)

En este ejemplo sencillo:

1. Tenemos dos campos de tipo number (num_a y num_b).
2. La etiqueta <output> tiene el name="resultado" y el atributo for="num_a num_b", indicando que su valor depende de esos dos campos.
3. El atributo oninput en la etiqueta <form> ejecuta un pequeño script de JavaScript cada vez que cambia el valor de cualquier control dentro del formulario. Este script calcula la suma de a.value y b.value y actualiza el value (contenido) del elemento output llamado resultado. (Nota: parseInt() se usa para asegurar que los valores se traten como números enteros para la suma).

La etiqueta <output> ayuda a crear formularios más interactivos y semánticamente correctos, dejando claro qué partes del formulario muestran resultados generados por el usuario.