What is the <output> tag for?

Asked

Viewed 645 times

6

I wonder what the tag is for <output>.

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 above example, I realized that this property value is something that does not exist in the other elements normally. Usually, you have the property value in the input, but it’s interesting to see that on the tag output also has.

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

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

Observing: Even I saw that the site has a question on the subject, but there is no answer about the purpose of the tag.

html html5
  • 4

    Read carefully: Some questions, however simple they may seem, are asked by me to help add content [in our native language] to the site.

  • 2

    Wallace you got the html dictionary today? :D

  • 1

    @hugocsl yes

  • 1

    Let’s alphabetize the SOPT

  • 2

    I liked the initiative, the Ctrl+C Ctrl+V guys need to see the basics

2 answers

5


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

Other than input=readonly, it will support "line breaks", ie will be able to write other HTML tags inside freely (of course in sending will be treated as text). It also has no visual of input (appearance), is similar to a normal element, but interacts with FORM, ie it is not exclusively used to represent calculations, this is only part of what it does.

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

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

...

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

It also supports validation https://w3c.github.io/html/single-page.html#dom-htmlinputelement-checkvalidity and the property defaultValue for chance change the value could still know what the initial value (original).

0

  • 1

    In w3c, I saw an example showing the result of a die coming from the websocket. I don’t think it is a case specifically restricted to calculations.

  • Yeah, the documentation in Portuguese of MDN really leaves something to be desired

  • @Wallacemaxters yes, it is quite weak the documentation, but anyway, I did not say it is restricted to calculations, I said it is generally used for, are different things :)

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.