How to include the result of a calculation in HTML5?


To define or include a result of calculation in HTML, we use <output> tag. The output tag helps in providing the result of calculation, which is performed by the JavaScript (Client side scripting language).

Syntax

Following is the usage of <output> tag −

<output> ---   </output>

Attributes

The attributes used in output tag is shown below −

Attribute

Description

for

List of IDs of other elements, i.e. it indicates the elements who have contributed input value to the calculation.

form

Enables to place output elements anywhere within a document.

name

It is the name of the element.

The output tag supports global and event attributes also.

Example

In the following example we are creating a calculator and including the result of the calculation back into the HTML page −

<!DOCTYPE html>
<html>
<head>
   <title>HTML Output Tag</title>
</head>
<body>
   <form oninput="sumresult.value = parseInt(z1.value)+parseInt(z2.value)+parseInt(z3.value)">
      <input type="range" name="z1" value="0" /> + <input type="number" name="z2" value="30" /> + <input type="number" name="z3" value="60" />
      <br> The output is: <output name="sumresult"></output>
   </form>
</body>
</html>

CSS Setting to output tag

Let us see how to apply the style tags to output element.

Syntax

Following is the default values displayed by most of the browsers for output element.

output {
   display: inline;
}

Example

Let us see one more example, to define the result of a calculation in HTML5 by applying CSS −

<!DOCTYPE html>
<html>
<head>
   <title> Result of a calculation </title>
   <style>
      body {
         text-align: center;
      }
   
      h1 {
         color: blue;
      }
   </style>
</head>
<body>
   <h1>Tutorials Point</h1>
   <h2> Include the result of a calculation in HTML? </h2>
   <form oninput="sumresult.value = parseInt(first.value) + parseInt(second.value) + parseInt(third.value)">
      <input type="number" name="first" value="30" /> + <input type="range" name="second" value="0" /> + <input type="number" name="third" value="50" />
      <br> Result: <output name="sumresult"></output>
   </form>
</body>
</html>

Updated on: 10-Oct-2023

490 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements