HTML - <output> Tag

Quiz

Introduction to <output> Tag

The HTML <output> tag is used to represent the result of a user interaction in the form. It is useful in dynamic web applications where the result of the operation needs to be displayed to the user, such as the result of a mathematical calculation, input validation.

The <output> tag is also associated with the JavaScript, which dynamically updates the value of the output. It can also be linked to form controls using the for attribute, that specifies the id of the input elements contributing to the result.

Syntax

Following is the syntax of HTML <output> tag −

<output>
</output>

Attributes

HTML output tag supports Global and Event attributes of HTML. It also accepts some specific attributes as well that are listed bellow.

Attribute	Value	Description
for	element_id	List of IDs of other elements, i.e it indicates the elements who have contributed input value to the calculation.
form	form_id	Enables to place output elements anywhere within a document.
name	name	It is the name of the element.

Example : Sum of Two Inputs

Let's look at the following example, where we are going to make the sum of inputs from the input field and range slider.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML output tag</title>
</head>
<body>
   <!--create output element-->
   <form oninput="add.value = parseInt(n1.value) + parseInt(n2.value)">
      <input type="range" min="0" max="100" name='n1' value="10">
      <input type="number" name='n2' value="20">
      <br> Output: <output name='add'></output>
   </form>
</body>
</html>

Example : Formatted Date Display

Consider the following example, where we are going to use the <output> tag to show the human-readable format of the selected date using JavaScript.

<!DOCTYPE html>
<html>
    <style>
        body{
            text-align:center;
            font-family:verdana;
            color:green;
        }
    </style>
<body>
<form>
  <label>Choose Date: <input id="x" type="date"></label>
  <br>
  Result : <output id="y"></output>
</form>
<script>
  document.getElementById('x').addEventListener('change', function () {
    const a = new Date(this.value);
    document.getElementById('y').value = a.toDateString();
  });
</script>
</body>
</html>

Supported Browsers

Tag
output	Yes 10.0	Yes 13.0	Yes 4.0	Yes 5.1	Yes 11.0

html_tags_reference.htm

Print Page