How to use the tag in HTML?


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.

Updated on: 16-Dec-2022

574 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements