DONT ADD ANYTHING HERE!

  1. The output element represents the result of a calculation
  2. for
    1. The for content attribute allows an explicit relationship to be made between the result of a calculation and the elements that represent the values that went into the calculation or that otherwise influenced the calculation
    2. The for attribute, if specified, must contain a string consisting of an unordered set of unique space-separated tokens that are case-sensitive, each of which must have the value of an ID of an element in the same document
    3. A space-separated list of other elements' id, indicating that those elements contributed input values to (or otherwise affected) the calculation.
  3. form
    1. The form attribute is used to explicitly associate the output element with its form owner
    2. The value of this attribute must be the id of a form element in the same document
    3. This attribute lets you associate output elements to a form element anywhere in the document, not just inside the form element
  4. name
    The name attribute represents the element's name
  5. value
    1. The element has a value mode flag which is either value or default
    2. Initially, the value mode flag must be set to default
    3. output.value [ = value ]
      Returns the element's current value.

Example

HTML

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">

    <input type="range" id="b" name="b" value="50" /> +
    <input type="number" id="a" name="a" value="10" /> =
    <output name="result" for="a b">60</output>

</form>

Browser

+ = 60

Example

HTML

<form id="form_two">
    <input type="range" id="x" name="x" value="50" /> +
    <input type="number" id="y" name="y" value="10" /> =
    <output name="result3" id="r3" for="x y">60</output>
</form>

JavaScript

form_two.addEventListener('input', function () {
    r3.value = parseInt(x.value) + parseInt(y.value);
})

Browser

+ = 60

References

MDN: The Output element
W3C: Output element