Dofactory.com
Dofactory.com

HTML <output> Tag

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).

Example

#

An <output> element that displays the results of a calculation.

The result of 8 * 8 = 64.

<p>The result of 8 * 8 = <output name="result">64</output>.</p>

More Examples

An <output> element displaying the value of the range <input> element.
Move the slider and see the <output> values change.



The value is 25
<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>

Code Explation:

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.


Attributes for <output>

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.


Code Tags

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

Browser support

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

You may also like


Last updated on Sep 30, 2023




Guides