html tutorial - Output tag in HTML - html5 - html code - html form
Learn html - html tutorial - output tag in html - html examples - html programs
- The <output> tag shows the result of a calculation.
- The <output> tag belongs to flow content, phrasing content, form-associated element, listed, labelable, resettable and palpable content.
- The <output> tag supports Global Attributes and Event Attributes.
Syntax for output tag:
<output name = “name”>content</output>Differences between HTML 4.01 and HTML5 for <output> tag:
HTML 4.01
- HTML4 does not supports <output> tag.
HTML5
- The <output> tag is new in HTML5.
Sample Coding for <output> tag:
Tryit<!DOCTYPE html>
<html >
<head>
<title>Wikitechy output tag</title>
</head>
<body>
<h2>HTML output tag with example</h2>
<form oninput="c.value=a.value+b.value">
<input type="text" name="a" value="Wiki">+
<input type="text" name="b" value="techy">=
<output name="c"></output>
</form>
</body>
</html>Code Explanation for <output> tag:
- oninput event triggers when user gives any input if the event triggered the concatenated string of and b will be stored in c.
- The <input> tag textbox named as a and its value will be “Wiki”.
- The <input> tag textbox named as b and its value will be “techy”.
- The <output> tag named as c and that will be show the concatenated output of a and b.
Output of <output> tag:
- The output shows the two textboxes with values as “Wiki” and “Techy”.
- When the user change the text in the text box that will be manipulated and displayed in the output.
Attribute:
| Attribute | HTML 4.0.1 | HTML 5 | Description |
|---|---|---|---|
| form | no | Yes | The <output> tag belongs to specify one or more forms. |
| name | no | Yes | Defines a name for the <output>tag. |
| for | no | Yes | Indicates the relation between the result of the calculation, and the elements used in the calculation. |
Browser Support for <output> tag:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 10.0 | No | 4.0 | 5.1 | 11.0 |