HTML <output> element is employed to exhibit the outcome of a computation (executed by JavaScript) or the result of a user interaction (like entering data into a form field).
The <output> element is a recent addition to HTML5.
Syntax
Example
<output>......</output>
Following are some particulars concerning the HTML <output> element:
| Display | Inline |
|---|---|
| Start tag/End tag | Both Start and End tag |
| Usage | Forms and Input |
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>Output Tag</title>
</head>
<body>
<p>Calculate the Sum of the two Numbers</p>
<form oninput="res.value=parseInt(a.value)+parseInt(b.value);">
<label>Enter First Value.</label><br>
<input type="number" name="a" value=""/><br>
+<br/>
<label>Enter First Value.</label><br>
<input type="number" name="b" value=""><br>
=<br>
Output is:<output name="res"></output>
</form>
</body>
</html>
Output:
Attribute:
Tag-specific attributes:
| Attribute | Value | Description |
|---|---|---|
for |
element_id | It specifies the list of other element's ids which indicates the relationship between the result of the calculation and the input elements. |
form |
form_id | It specifies the form element to which this element is associated with. |
name |
name | It defines the name for the output element. |
Global attribute:
HTML <output> tag allows for the utilization of global attributes within HTML documents.
Event attribute:
HTML <output> tag allows for the integration of event attributes within HTML elements.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<output> |
Yes | Yes | Yes | Yes | Yes |