Spread the love

HTML <output> Tag

The HTML <output> Tag is used to display the result of some calculation (performed by JavaScript) or the result of a user action (such as input data into a form element).

The <output> Tag is a newly added tag and was introduced in HTML5.

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        HTML output Tag
    </title>
</head>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
} 
 .main
{
    text-align: center;
}
 .main
form
label{
    font-size: 25px;
    font-weight: 700; 
}
.main
form
input{
    padding: 10px;
    width: 200px;
    background: lightblue;
}
.main
form
span{
    font-weight: bold;
    font-size: 30px;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML output tag Example</h1>    
  
<div class="main">
  <h3>Calculate the Sum of the two Numbers</h3>
     <form oninput="res.value=parseInt(a.value)+parseInt(b.value);">
    <label>Enter First Value.</label><br>
    <input type="number" name="a" value=""/><br>
    <span>+</span><br/>
    <label>Enter First Value.</label><br> 
    <input type="number" name="b" value=""><br>
    <span>=</span><br>
    <label>Output is:<output name="res"></output></label>
 </form>
</div>
</body>
</html>

Output:-

HTML output Tag

This is HTML output tag Example

Calculate the Sum of the two Numbers



+


=

Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *