How to define the result of a calculation using HTML?

Last Updated : 25 Jun, 2024

The <output> tag is used to representing the result of a calculation performed by the client-side script such as JavaScript. The <output> tag is a new tag in HTML5 and it requires starting and ending tags.

Syntax:

<output> Results... </output>

Approach

The document starts with the standard HTML5 doctype and the title of the page.
A style block in the head section sets the text alignment of the body to the center, ensuring that all content within the body is centered horizontally on the page.
The body contains an h2 heading with the text, followed by a form element. This heading provides a clear title for the form that follows.
The form includes three input elements: two number inputs with default values of 50 and 30, respectively, and one range input with a default value of 0. The form also includes an output element that displays the result of the calculation.
The form uses the oninput attribute to dynamically update the output whenever the value of any input changes. The calculation is done by parsing the values of inputs as integers and summing them up. This provides instant feedback to the user as they interact with the form inputs.

Example: The example below shows the above-explained approach.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>
        Define the result
        of a calculation
    </title>

    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>
        Define the result of a calculation
    </h2>

    <form oninput="sumresult.value = parseInt(A.value) 
                + parseInt(B.value) + parseInt(C.value)">
        <input type="number" name="A" value="50" /> +
        <input type="range" name="B" value="0" /> +
        <input type="number" name="C" value="30" />
        <br>
        Result: <output name="sumresult"></output>
    </form>
</body>

</html>