HTML <output> Tag

The <output> tag is one of the HTML5 elements. It defines a place for representing the result of a calculation performed by a script or user’s interaction with a form element (<form> tag). The <output> tag is designed for complex calculations, like the results of an exchange rate conversion.

Calculating with the <output> tag

In order to use the <output>, some basic knowledge of JavaScript is required. Define an <input> type of number to inform the form that the user is entering integers. If the user enters another information, the <output> form returns NaN , that means not a number. Nowadays, <output> is not supported internationally.

Syntax

The <output> tag comes in pairs. The content is written between the opening (<output>) and closing (</output>) tags.

Example of the HTML <output> tag:

<!DOCTYPE html>
<html>
  <body>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
      <input type="range" id="a" value="50">100 +
      <input type="number" id="b" value="25"> =
      <output name="x" for="a b"></output>
    </form>
    <p>Multiplication:</p>
    <form oninput = "d.value = e.valueAsNumber * f.valueAsNumber">
      <input type = "number" id = "e"> *
      <input type = "number" id = "f"> =
      <output name = "d" for = "e f"> </output>
    </form>
  </body>
</html>
Try it Yourself »

Result

Attributes

Attribute	Value	Description
for	element_id	Defines the id of an element/elements, specifying the connection between the calculation result and elements, which are used in the calculation.
form	form_id	Defines one or more forms, which the output element belongs to.
name	name	Defines the name of the element.

The <output> tag supports the Global Attributes and the Event Attributes.

Browser support


10+	4+	5.1+	11+

Do you find this helpful?

Headline