Skip to main content

HTML <output> Tag

The HTML <output> tag provides a helpful way to display the results of a calculation or script on a web page. This tag can be used, for example, in a JavaScript calculator program, or any other interactive application where you need to show users the output of calculations.

The tag is a useful element for displaying the results of calculations performed within an <form> element.

This element has three important attributes: for, form and name.

  • for attribute is a space-separated list of other elements' IDs, which indicates that these elements have contributed input values to the calculation.
  • form attribute lets you associate <output> elements with forms anywhere in the document, not just within a single form.
  • name attribute is used in the form.elements API to identify the output element and its results.

For example:

+ - = 3 
<form oninput="o.value=parseInt(x.value) + parseInt(y.value) - parseInt(z.value)">
<input type="number" step="1" name="x" value="10"> +
<input type="number"step="1" name="y" value="5"> -
<input type="number" step="1" name="z" value="12"> =
<output name="o" for="x y x">3</output>
</form>

This code snippet shows how three input fields can be combined together to calculate the sum of three variables using the Javascript parseInt() method and displaying the result using the output tag.

Another example:

Total Amount: 

<script type="text/javascript">
function calculateTotal(){
    let item1 = document.forms['cart']['price'].value;
    let item2 = document.forms['cart']['quantity'].value;
    let totalCost = parseInt(item1) + parseInt(item2);
    document.forms['cart']['total'].value = totalCost;
}
</script>
<form id="cart">
   <input type="number" name="price" value="10000" />
   <input type="number" name="quantity" value="2" />
   <input type=button value="Calculate" onClick="calculateTotal()"/>
   <p>Total Amount: <output name="total"></output></p>
</form>

Using <output> tags provides us with far more flexibility than if we were relying solely on HTML alone; as calculating values can typically only be done using either server-side scripting (such as PHP) or client-side scripting (like JavaScript).

With the introduction of this element, however, developers can now write much simpler scripts that are executed entirely by browsers without having to rely upon additional languages or frameworks. This means constructing dynamic applications becomes much easier and faster for developers - saving them time and improving productivity in their projects overall.