Tag HTML <saída>

Estamos falando de saída de tags HTML com exemplos . Isso preencherá os requisitos para o aprendizado.

A tag <output> é uma tag de fechamento automático em HTML e é usada para representar o resultado de um cálculo ou ação do usuário. É usado em conjunto com as tags <form> e <input> . A tag <output> exibe o resultado do cálculo ou entrada do usuário na página da web.

Calcule o resultado e exiba-o em um elemento <output> :

Example:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<form oninput="mrx.value=parseInt(x.value)+parseInt(y.value)">
<input type="range" id="x" value="55">
+<input type="number" id="y" value="15">
=<output name="mrx" for="x y"></output>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O exemplo de tag <output> é o seguinte:

Example:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="10"> +
<input type="number" id="b" value="20"> =
<output name="result" for="a b"></output>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo da tag <output> com o javascript:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<body>
<script>
function calculateDiscount() {
let price = document.getElementById("price").value;
let discount = document.getElementById("discount").value;
let result = document.getElementById("result");
result.value = (price = (price * (discount / 100))).toFixed(2);
}
</script>
<form>
<label for="price">Enter the price:</label>
<input type="number" id="price" name="price" value="100" oninput="calculateDiscount()">
<br>
<label for="discount">Enter the discount percentage:</label>
<input type="number" id="discount" name="discount" value="10" oninput="calculateDiscount()">
<br>
<label for="result">Discounted price:</label>
<output name="result" id="result" for="price discount"></output>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca HTML <saída>:

Uso de saída de marca

A saída do Tag <saída> tem como objetivo indicar o resultado de um cálculo (como aquele feito por um script).

Aqui estão alguns casos de uso comuns para a tag <output> :

A tag <output> pode ser usada para exibir mensagens de erro ou outro feedback para o usuário após o envio de um formulário.
A tag <output> pode ser usada para exibir o resultado de um cálculo realizado por uma função JavaScript.
A tag <output> pode ser usada para exibir a saída de um aplicativo interativo, como um jogo ou simulação.

Atributos

Global

Em HTML, a tag <output> também aceita atributos globais .

Evento

Em HTML, a tag <output> também aceita atributos de evento .

Lista de Atributos

Atributo	Valor	Visão geral
para	element_id	Determine a relação entre o resultado do cálculo e os elementos envolvidos no cálculo.
forma	form_id	Fornece informações sobre o formulário do elemento de saída.
nome	nome	O nome de um elemento de saída é determinado.

Compatibilidade do navegador

Os números na tabela indicam a versão mais antiga do navegador totalmente compatível com o elemento .

Elemento
<saída>	10,0	13,0	4.0	5.1	11,0

CSS predefinido

A maioria dos navegadores mostrará o elemento <output> com os seguintes valores por padrão em Tag Output :

output {
display: inline;
}

Vantagens da tag HTML <output>

Algumas das vantagens de usar a tag “ output ” em HTML incluem:

A tag “ output ” fornece informações valiosas para leitores de tela e outras tecnologias assistivas, tornando seu site mais acessível para pessoas com deficiência.
O uso da tag “ output ” pode tornar seu código mais eficiente, reduzindo o tempo de carregamento e melhorando o desempenho.
A tag “ saída ” ajuda a esclarecer o objetivo de um formulário ou cálculo, exibindo os resultados de forma clara e organizada.
A tag “ output ” pode ser usada para exibir os resultados de uma ampla gama de cálculos e ações do usuário, tornando-a uma ferramenta versátil para desenvolvedores web.
O uso da tag “ output ” pode ajudar a garantir consistência em diferentes navegadores e dispositivos, tornando seu site mais fácil de usar.
A tag “ output ” pode ser personalizada usando CSS, permitindo que você estilize a saída para se adequar ao design do seu site.

Se este artigo em algum lugar atendeu aos seus desejos educacionais, assine nosso boletim informativo abaixo para se conectar com o conteúdo semelhante neste site.

Nós valorizamos o seu feedback.

Tag HTML <saída>

Example:

Example:

Example:

Uso de saída de marca

Atributos

Global

Evento

Lista de Atributos

Compatibilidade do navegador

CSS predefinido

Vantagens da tag HTML <output>

Sentindo entediado?