What is the output tag for?

Navigation
6

I'd like to know what the <output> tag is for.

I saw this example here on the internet: 

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
  <input name="a" type="number" step="any"> +
  <input name="b" type="number" step="any"> =
  <output name="o" for="a b"></output>
</form>

Looking at the example above, I realized that this value property is something that does not exist in other elements normally. Generally, you have the property value in input , but it's interesting to see that in the output tag too.

I wanted to understand a little more about it to see if I can use it in my day to day life.

  • What is the purpose of this tag?
  • What's the difference of writing a value in a <output> tag to the other tags? That is, was not it enough just to use innerText ?

Note : I even saw that the site has a question on the subject , however there is no answer on the purpose of the tag.

    
asked by anonymous 10.07.2018 / 21:35

2 answers

5

In short, the <output> tag is like the <input> tag with the readonly attribute, its value can be sent via the form request, so no, it was not enough just innerText , since another tag, such as div would not send the value.

Unlike input = readonly, it will support "line breaks" , ie you will be able to write other HTML tags freely inside (of course the submission will be treated as text). It also does not have a% cos (appearance) look, is similar to a normal element, but interacts with FORM, that is is not exclusively used to represent calculations, this is only part of what it does.

Including that input supports the <output> attribute which can be a great advantage, ie the form can be in one place and output in another: 

<form id="meuForm">
...
</form>

...

<output form="meuFrom"></output>

It also supports validation and the form="" property for chance change the value could still know what the initial (original) value.

    
10.07.2018 / 21:50
0

The output element, read as output in the Portuguese language, is generally used to represent the result of a calculation.

Example usage: link

Like other HTML elements, output accepts attributes for , form and name .

Note that this tag does not work in any browser.

Source: link

    
10.07.2018 / 21:45
Is it appropriate to use layers in an application using microservices? Error executing the cordova build command