HTML <output> tagS2C Home   « HTML <output> tag

Definition

The <output> tag is used for representing the result of a calculation.

The <output> tag was introduced in HTML5.

Example


<form onsubmit="return false" 
      oninput="volume.value = (length.valueAsNumber * width.valueAsNumber * height.valueAsNumber)">
  <fieldset>
    <legend>Volume of a rectangle Calculator</legend> 
    <p><label for="length">Volume</label>
    <input type="number" id="length" name="length" min="0" max="100" value="0"></p>
    <p><label for="width">Volume</label>
    <input type="number" id="width" name="width" min="0" max="100" value="0"></p>
    <p><label for="height">Volume</label>
    <input type="number" id="height" name="height" min="0" max="100" value="0"></p>
    <p>Volume of rectangle: <output name="volume" for="length width height">0</output> m<sup>3</sup></p>
  </fieldset>
</form>
Volume of a rectangle Calculator

Volume of rectangle: 0 m3

In the above example, the values of the inputs are bound to the output and calculated on entry.

Attributes

The following attributes can be used with the <output> tag.


<output> Specific Attributes
Attribute Value Description Example
namenameSpecifies a name for the <output> tag. 

<output name="someName">Initial value</output>
forelement_idSpecifies an explicit relationship made between a calculated result and the elements representing the values used for the calculation.

Space separated list representing the ID attributes of the form elements used in the calculation.

The for attribute must match the id attributes of the control elements used to create the result of the calculation.		 

<output name="volume" 
  for="length width height">Initial value</output>
<output> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content. 

<output class="name">Initial value</output>
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<output id="name">Initial value</output>
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<output style="color:red;">Initial value</output>
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<output title="Content info">Initial value</output>
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<output accesskey="a">Initial value</output>
tabindexSpecifies a tab order for the element. 

<output tabindex="1">Initial value</output>
Language
dirSpecifies the directional flow of the content. 

<!-- The text will flow from left to right -->
<output dir="ltr">Initial value</output>
<!-- The text will flow from right to left -->
<output dir="rtl">Initial value</output>
langSpecifies a language code for the content of the element. 

<output lang="en">Initial value</output>
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<output spellcheck="true">Initial value</output>
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<output translate="no">Initial value</output>
Miscellaneous
contenteditableSpecifies whether the content of the element is editable. 

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<output contenteditable="true">Initial value</output>
draggableSpecifies whether the element is draggable. 

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<output draggable="true">Initial value</output>
hiddenSpecifies whether the element is not yet, or no longer, relevant. 

<!-- Valid values an empty string or hidden -->
<output hidden>Initial value</output> 
<output hidden="hidden">Initial value</output>
<output> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element. 

 <!-- Executes go() function -->
<output oncopy="go()">Initial value</output>
oncutThe script to be run when the user cuts the content of an element. 

 <!-- Executes go() function -->
<output oncut="go()">Initial value</output>
onpasteThe script to be run when the user pastes some content into an element. 

 <!-- Executes go() function -->
<output onpaste="go()">Initial value</output>
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<output ondrag="go()">Initial value</output>
ondragendThe script to be run when an element has stopped being dragged. 

 <!-- Executes go() function -->
<output ondragend="go()">Initial value</output>
ondragenterThe script to be run when an element has been dragged to a valid drop target. 

 <!-- Executes go() function -->
<output ondragenter="go()">Initial value</output>
ondragleaveThe script to be run when an element leaves a valid drop target. 

 <!-- Executes go() function -->
<output ondragleave="go()">Initial value</output>
ondragoverThe script to be run when an element is being dragged over a valid drop target. 

 <!-- Executes go() function -->
<output ondragover="go()">Initial value</output>
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<output ondragstart="go()">Initial value</output>
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<output ondrop="go()">Initial value</output>
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<output onblur="go()">Initial value</output>
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<output onchange="go()">Initial value</output>
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<output oncontextmenu="go()">Initial value</output>
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<output onfocus="go()">Initial value</output>
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<output oninput="go()">Initial value</output>
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<output oninvalid="go()">Initial value</output>
onresetThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<output onreset="go()">Initial value</output>
onselectThe script to be run when some or all of the contents of an object are selected. 

 <!-- Executes go() function -->
<output onselect="go()">Initial value</output>
onsubmitThe script to be run when a form is submitted. 

 <!-- Executes go() function -->
<output onsubmit="go()">Initial value</output>
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down. 

 <!-- Executes go() function -->
<output onkeydown="go()">Initial value</output>
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released. 

 <!-- Executes go() function -->
<output onkeypress="go()">Initial value</output>
onkeyupThe script to be run when an element is in focus and keyboard key is released. 

 <!-- Executes go() function -->
<output onkeyup="go()">Initial value</output>
Media
onabortThe script code to be run on abort. 

 <!-- Executes go() function -->
<output onabort="go()">Initial value</output>
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing. 

 <!-- Executes go() function -->
<output oncanplay="go()">Initial value</output>
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering. 

 <!-- Executes go() function -->
<output oncanplaythrough="go()">Initial value</output>
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<output oncuechange="go()">Initial value</output>
ondurationchangeThe script to be run when the length of the media is changed. 

 <!-- Executes go() function -->
<output ondurationchange="go()">Initial value</output>
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error. 

 <!-- Executes go() function -->
<output onemptied="go()">Initial value</output>
onendedThe script to be run when the media has reach the end. 

 <!-- Executes go() function -->
<output onended="go()">Initial value</output>
onloadeddataThe script to be run when media data is loaded and playback can start. 

 <!-- Executes go() function -->
<output onloadeddata="go()">Initial value</output>
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<output onloadedmetadata="go()">Initial value</output>
onloadstartThe script to be run whenthe media resource has started loading. 

 <!-- Executes go() function -->
<output onloadstart="go()">Initial value</output>
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<output onpause="go()">Initial value</output>
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<output onplay="go()">Initial value</output>
onplayingThe script to be run when when playback has already begun. 

 <!-- Executes go() function -->
<output onplaying="go()">Initial value</output>
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<output onprogress="go()">Initial value</output>
onratechangeThe script to be run when the playback rate changes. 

 <!-- Executes go() function -->
<output onratechange="go()">Initial value</output>
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished. 

 <!-- Executes go() function -->
<output onseeked="go()">Initial value</output>
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active. 

 <!-- Executes go() function -->
<output onseeking="go()">Initial value</output>
onstalledThe script to be run when the browser is unable to continue fetching media data. 

 <!-- Executes go() function -->
<output onstalled="go()">Initial value</output>
onsuspendThe script to be run when media data has stopped before being completely loaded. 

 <!-- Executes go() function -->
<output onsuspend="go()">Initial value</output>
ontimeupdateThe script to be run when the media resources current playback position has changed. 

 <!-- Executes go() function -->
<output ontimeupdate="go()">Initial value</output>
onvolumechangeThe script to be run when the volume has changed or been muted. 

 <!-- Executes go() function -->
<output onvolumechange="go()">Initial value</output>
onwaitingThe script to be run when the media resource has paused but is expected to resume. 

 <!-- Executes go() function -->
<output onwaiting="go()">Initial value</output>
Mouse
onclickThe script to be run when when a mouse is clicked on an element. 

 <!-- Executes go() function -->
<output onclick="go()">Initial value</output>
ondblclickThe script to be run when a mouse is double clicked on an element. 

 <!-- Executes go() function -->
<output ondblclick="go()">Initial value</output>
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element. 

 <!-- Executes go() function -->
<output onmousedown="go()">Initial value</output>
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<output onmousemove="go()">Initial value</output>
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<output onmouseout="go()">Initial value</output>
onmouseoverThe script to be run when the mouse cursor moves over an element. 

 <!-- Executes go() function -->
<output onmouseover="go()">Initial value</output>
onmouseupThe script to be run when the mouse button is released while the cursor is over the element. 

 <!-- Executes go() function -->
<output onmouseup="go()">Initial value</output>
onwheelThe script to be run when the mouse wheel rolls up or down over an element. 

 <!-- Executes go() function -->
<output onwheel="go()">Initial value</output>
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled. 

 <!-- Executes go() function -->
<output onscroll="go()">Initial value</output>
Window - NONE

Relevant HTML Tutorials

HTML Advanced - Advanced Forms