Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Include Calculation Result 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>
701 Views
