The <output> tag creates a container with output results.
These results are from a calculation or a user action.
Or they are the result of a client-side action (i.e. JavaScript).
An <output> element that displays the results of a calculation.
The result of 8 * 8 = .
<p>The result of 8 * 8 = <output name="result">64</output>.</p>
An <output> element displaying the value of the range <input> element.
Move the slider and see the <output> values change.
<form oninput="result.value = slider.value">
<input type="range" id="slider" value="25">
<br /><br />
The value is <output name="result" for="slider">25</output>
</form>
oninput - specifies the function to execute when any input element inside the form changes
The slider value is assigned to the <output> element when changes are made.
This table lists the <output> tag attributes.
| Attribute | Value | Description |
|---|---|---|
| for | element-id | Relationship between elements used in calculation and its result |
| form | form-id | Id of the form where the ouput element belongs to |
| name | name | Output element name |
| id | identifier | Defines a unique identifier for the output. |
| class | classnames | Sets one or more CSS classes to be applied to the output. |
| style | CSS-styles | Sets the style for the output. |
For additional global attributes see our global attributes list.
The <output> tag is part of a group of tags
that create coding (programming) related features on web pages.
This group is referred to as the Code tag group.
Together, they allow you to create code-friendly pages.
A list of code tags.
| Element | Description |
|---|---|
| <pre> | Displays pre-formatted text in fixed-width font -- usually computer code |
| <code> | An element that is used to display computer code |
| <samp> | Displays sample output from a coumputer code |
| <output> | Displays output results of a calculation |
| <var> | Defines its content as a variable |
| <!--...--> | Marks text as comments in the source code. Not visible to users |
Here is when <output> support started for each browser:
![]() Chrome
|
10.0 | Mar 2011 |
![]() Firefox
|
4.0 | Mar 2011 |
![]() IE/Edge
|
13.0 | Nov 2015 |
![]() Opera
|
11.0 | Dec 2010 |
![]() Safari
|
5.1 | Oct 2011 |