HTML Tutorial

HTML Tag: <output>

Usage of <output>

The <output> tag represents the result of a calculation or user action. It displays the output from calculations, scripts, or other operations performed by the browser.

Attributes of <output>

  • for: Specifies the element that controls the output
  • form: Specifies the form to which the output belongs
  • name: Provides a unique name for the output

Examples with <output>

  • Simple output:

Calculation result: 10

  • Output from a form:
    Result:

Exploring the <output> tag

<!DOCTYPE html>
<html>
<body>

<form>
  <input type="number" id="num1">
  <input type="number" id="num2">
  <button type="submit" onclick="calculate()">Calculate</button>
  <output id="result" for="num1 num2"></output>
</form>

<script>
  function calculate() {
    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;
    var result = num1 * num2;
    document.getElementById("result").value = result;
  }
</script>

</body>
</html>

This example creates a simple form with two input fields and a button. When the button is clicked, the calculate() function is called, which computes the product of the two numbers and displays the output in the <output> element with the ID "result".