<output>: Elemento OUTPUT
Última atualização: 2026-10-13
<output>Elemento OUTPUT
Representa o resultado de um cálculo ou ação do usuário, frequentemente mostrando saída ao vivo de um formulário via JavaScript; o atributo for lista as entradas usadas.
| Categoria | Formulários |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </output> tag |
| Status | Padrão |
📝 Sintaxe
<output name="result">0</output>⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
for | Space-separated ids of elements that contributed to the result. | |
form | The id of the owning form (may be outside it). | |
name | Field name used when submitting the form. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <output> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： output não é editável, mas é zerado ao redefinir o formulário; apenas exibe o resultado.
❓ Perguntas Frequentes
QPara que serve a tag output?
A
<output> exibe «o resultado de um cálculo ou de uma ação do usuário» — caso típico: valor acoplado a um slider, total em tempo real do formulário: <output for='a b'>30</output>, com o atributo for listando os ids dos controles envolvidos. Tem semântica aria-live embutida: mudanças de valor são anunciadas pelo leitor de tela.QQual é a diferença entre output e span para exibir resultados?
A
<output> tem a semântica de «resultado» e já vem com aria-live='polite' (mudanças anunciadas automaticamente); o span não tem nada disso. Resultados de cálculo e valores acoplados usam output; texto estático usa span — semântica e acessibilidade mais precisas.QO atributo for de output é obrigatório?
ANão é obrigatório. Acoplamento de um único controle (o número ao lado do slider) pode dispensar o for; quando o resultado depende de vários controles (como a+b),
for='a b' com ids separados por espaço explicita a relação.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
