RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-output-tag/ below:

HTML <output> Tag - GeeksforGeeks

HTML <output> Tag

Last Updated : 11 Jul, 2025

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

It also supports the Global Attributes and Event Attributes in HTML. The content within the <output> tag can be manipulated dynamically through JavaScript.

Syntax

<output> Results... </output>

Attributes

Attribute Value

Description

for

This attribute contains an attribute value element_id which is used to specify the relation between result and calculations.

form

This attribute contains an attribute value form_id which is used to specify one or more forms of output elements.

name

This attribute contains an attribute value name that is used to specify the name of the output element.

Example 1: In this example, we will see the implementation of output tag with an example.

html


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

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

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        HTML output Tag
    </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>
        <!-- output tag -->
        Result: <output name="sumresult"></output>
    </form>
</body>

</html>

Output:

Example 2: In this example, <output> tag is used with for and form attribute.

html


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

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

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        HTML output Tag
    </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="50" />
        <br /> Submit Result:
        <!-- output tag -->
        <output name="sumresult" 
                for="A B C">
        </output>
        <br>
        <input type="submit">
    </form>
</body>

</html>

Output:

Supported Browsers

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4