O que é o elemento <output> em HTML5?

O elemento <output> é utilizado para exibir os resultados de cálculos realizados, geralmente, do lado do cliente.

Exemplos de uso:

1. Ligação com elementos de formulário:

   <!-- Declarar um input para inserir um número -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Declarar um input para inserir outro número -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Declarar um output para mostrar o resultado, vinculando-o aos inputs pelo id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Obter os elementos input
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Obter o elemento output
     const result = document.querySelector('output[name="result"]');
   
     // Função para atualizar o resultado
     function updateResult() {
       // Realizar o cálculo e atualizar o valor do output
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Adicionar ouvintes de eventos para atualizar o resultado ao alterar os inputs
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Atualização inicial do resultado ao carregar a página
     updateResult();
   </script>
   

2. Mostrar resultados com JavaScript:

   <!-- Elemento output para mostrar o resultado -->
   <output id="message"></output>
   
   <script>
     // Obter o elemento output
     const messageOutput = document.getElementById('message');
   
     // Definir o valor do output
     messageOutput.value = "Olá, mundo!";
     // Ou innerText
     messageOutput.innerText = "Olá, mundo!";
   </script>
   

Atributos:

• for: Lista de identificadores de elementos envolvidos no cálculo, cujo resultado é exibido em <output>. Separados por espaços.
• name: Nome do elemento <output>. Usado para identificá-lo ao enviar o formulário.

Características importantes:

• Por padrão, <output> não possui conteúdo visível até que seja atribuído um valor através do atributo value ou JavaScript.
• <output> pode estar vinculado a elementos de formulário, mas não faz parte dos dados enviados no envio do formulário, a menos que seja atribuído um valor através do atributo value. Em vez disso, seu valor é atualizado dinamicamente com JavaScript.
• Semânticamente, é destinado a exibir resultados, o que é útil para acessibilidade e otimização de busca.