Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use the
In the following article we are going to learn how to use the output tag in HTML.
One of the HTML5 element is the <output> tag. It establishes a location for displaying the outcome of a computation made by a script or a user's engagement with a form element (the <form> tag). For complicated calculations, such as the outcomes of an exchange rate conversion, the <output> tag is intended.
Syntax
Following is the syntax for <output> tag
<output>….content…</output>
Calculating with the <output> tag
You must have an idea of JavaScript in order to use the <output>. In order to let the form, know that the user is entering integers, define a <input> type=” number”. The <output> form returns Nan, which stands for not a number, if the user provides any further information.
Let’s look into the examples for understanding of how to use <output> tag in HTML...
Example 1
In the following example we are creating multiplication task to display output.
<!DOCTYPE html>
<html>
<body>
<p>Multiplication:</p>
<form oninput="a3.value = a1.valueAsNumber * a2.valueAsNumber">
a1:<input type="number" id="a1"> *
a2:<input type="number" id="a2"> =
<output name="a3" for="a1 a2"> </output>
</form>
</body>
</html>
When the script gets executed, it will generate an output displaying the input fields for a1,a2 to enter the integer value to perform the calculation we assigned in the script.
When the user tries to enter the value for a1 and waits for the output without entering the a2 value, it will generate an output as "Nan" on the webpage.
Example 2
In the following example we are using the <output> element with range of <input> element.
<!DOCTYPE html>
<html>
<body>
<form oninput="a1.value = a2.value">
<input type="range" id="a2" value="10">
<br /><br />
The value is <output name="a1" for="a2">10</output>
</form>
</body>
</html>
When the script gets executed, it will generate an output displaying the slider representing the <input>range with the default set value of "10".
When the user slides or tries to change the range of <input>, the new values of the range get displayed on our webpage.
Example 3
In the following example we are creating an addition task with type=”range” and “number.
<!DOCTYPE html>
<html>
<head>
<title>HTML Output Tag</title>
</head>
<body>
<form oninput = "result.value = parseInt(a1.value)+parseInt(a2.value)">
<input type = "range" name = "a1" value = "0" /> +
<input type = "number" name = "a2" value = "5" /> <br />
The output is: <output name = "result"></output>
</form>
</body>
</html>
On running the above script, the output window will pop up, displaying the input fields for the range slider and an input field to enter the number by the user. By default, its value is set to 5.
When the user tries to slide and enter the integer in the input field, the addition task gets triggered and displays a new value on the webpage.
578 Views
