HTML <output> Tag
Use a tag <output> para exibir o resultado de um cálculo. Descrição, atributos e exemplos da tag.
A tag <output> é um dos elementos HTML5. Ela define um local para exibir o resultado de um cálculo realizado por um script, ou o resultado da interação do usuário com um formulário. Normalmente é usada em conjunto com controles <input> dentro de um <form>, e é muito adequada para resultados em tempo real, como um total acumulado, um preço após desconto ou uma conversão de câmbio.
Por que usar <output> em vez de um <span>?
Você poderia exibir um valor calculado em um <span> simples, mas <output> adiciona semântica e acessibilidade que um <span> não oferece:
- É uma região ativa implícita.
<output>tem o papel ARIAstatuspor padrão, o que a torna uma região ativa educada. Quando o conteúdo de texto muda, tecnologias assistivas como leitores de tela anunciam o novo valor automaticamente — sem que você precise adicionar atributosroleouaria-live. - É semanticamente vinculada ao formulário. Navegadores e ferramentas tratam
<output>como um elemento real associado a formulários, portanto a relação do valor com seus campos de entrada faz parte do significado do documento, não apenas de seu layout. - O atributo
fordocumenta a relação. Ele lista os IDs dos controles que contribuíram para o resultado, expressando a intenção na marcação.
Por causa do comportamento de região ativa, um usuário com visão vê o número sendo atualizado enquanto um usuário de leitor de tela ouve a atualização. Um <span> oferece apenas a mudança visual.
O atributo for e a ligação com oninput
O atributo for recebe uma lista de IDs de elementos separados por espaço — os controles cujos valores alimentam o cálculo. Ele é puramente declarativo: informa a leitores e ferramentas de quais entradas o resultado depende. Por si só, não recalcula nada.
O recálculo é conduzido por JavaScript. Colocar oninput no <form> é um atalho comum: o evento input propaga em bolha, então um único manipulador no formulário é acionado sempre que qualquer controle dentro dele muda. Dentro desse manipulador, você lê os valores de entrada e atribui o resultado a output.value.
Exemplo básico
No exemplo abaixo, um manipulador oninput no formulário mantém o <output> sincronizado à medida que qualquer controle muda. O atributo for="a b" registra que o resultado depende dos campos com IDs a e 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>O 75 escrito entre as tags é o valor padrão do elemento — o valor exibido antes de qualquer alteração de entrada, e o valor para o qual <output> é restaurado quando o formulário é redefinido.
Ligação com addEventListener
O oninput inline é conciso, mas mistura comportamento à marcação. Em projetos reais, mantenha o script separado e adicione o manipulador com addEventListener. Esta versão multiplica dois números e reutiliza um único manipulador para o evento input do formulário:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form id="calc">
<input type="number" id="e" value="6" /> ×
<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>Observe valueAsNumber: para entradas do tipo number e range, ele retorna um número real (ou NaN para entrada vazia/inválida), evitando a conversão com parseInt. Se o usuário limpar um campo, o resultado se torna NaN; proteja-se disso em código de produção caso um campo em branco deva exibir 0 ou uma string vazia.
O atributo form (saídas desassociadas)
Por padrão, um <output> pertence ao formulário no qual está aninhado. O atributo form permite associar uma saída a um formulário mesmo quando ela está fora da marcação desse formulário — útil quando o layout exige que o resultado fique em outro lugar na página. Aponte form para o id do formulário 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>O valor é enviado com o formulário?
Não. Mesmo que <output> aceite um atributo name, seu valor não é enviado quando o formulário é submetido. O name existe para que scripts possam referenciar o elemento e para APIs relacionadas a formulários, não para transmitir dados ao servidor. Se você precisar do resultado calculado no servidor, copie-o para um campo oculto (<input type="hidden">) ou recalcule-o no servidor.
Quando o formulário é redefinido, o <output> retorna ao seu valor padrão — o conteúdo de texto presente no HTML — em vez do valor que um script atribuiu por último.
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| for | element_id | Define um ou mais IDs de elementos separados por espaço, especificando a conexão entre o resultado do cálculo e os elementos usados no cálculo. |
| form | form_id | Define um ou mais formulários aos quais o elemento output pertence. |
| name | name | Define o nome do elemento. |
A tag <output> suporta os Atributos Globais e os Atributos de Evento.
Páginas relacionadas
- HTML
<input>Tag — os controles que alimentam valores em um<output>. - HTML
<form>Tag — o contêiner ao qual um<output>é associado.