Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides