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

Required Attributes

NONE

Optional Attributes

for - specifies an explicit relationship made between a calculated result and the elements representing the values used for the calculation.

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


<!-- ** space separated list representing the ID attributes of the form elements used in the calculation ** -->
<output name="volume" for="length width height">

name specifies a name for the object.


<output name="someName">
</object>

Global Attributes

Common

class - specifies a classname for the element allowing you to apply the style of the predefined class to the content.


<output class="classname">Output value here</output>

id - specifies a unique id for the element allowing you to apply the style of the predefined id to the content.


<output id="idname">Output value here</output>

style - specifies an inline style for the element allowing you to apply the style to the content.


<output style="color:red;text-align:left">Output value here</output>

tabindex - specifies the tab index of the output.


<output tabindex="2">Output value here</output>

title - specifies extra information about the content.


<output title="information about the content">Output value here</output>

Keyboard

accesskey - specifies a keyboard shortcut to associate with the element.


<output accesskey="aKeyValue">Output value here</output>

tabindex - specifies a tab order for the element.


<output tabindex="someNumber">Output value here</output>

Language

dir - specifies the directional flow of the content.


<output dir="ltr">Output value here</output>   <!-- The text will flow from left to right -->
<output dir="rtl">Output value here</output>   <!-- The text will flow from right to left -->

lang - specifies a language code for the content of the element.


<output lang="en">Output value here</output>

spellcheck - specifies whether the element is to have its spelling checked.


<!-- Valid values are true and  false - default is inherited / browser specific. -->
<output spellcheck="true">Output value here</output>

translate - specifies whether the content of the element can be translated.


<!-- Valid values are yes and  no - default is yes. -->
<output translate="no">Output value here</output> 

Miscellaneous

contenteditable - specifies whether the content of the element is editable.


<!-- Valid values are true and  false - default is inherited. -->
<output contenteditable="false">Output value here</output> 

draggable - specifies whether the the element is draggable.

Only text selections, images, and links can be dragged.


<!-- Valid values are true and  false - default is browser specific. -->
<output draggable="true">>Output value here</output>>

hidden - specifies whether the element is not yet, or no longer, relevant.


<!-- Valid values are an empty string or hidden -->
<output hidden>>Output value here</output> 
<output hidden="hidden">Output value here</output> 

Event Attributes

Document

onabort - The JavaScript code to be run on abort.


<output onabort="go()">Output value here</output>   <!-- Executes the go() function -->

onerror - The JavaScript code to be run when an error occurs when the file is being loaded.


<output onerror="go()">Output value here</output>   <!-- Executes the go() function -->

onload - The JavaScript code to be run when the document is loaded.


<output onload="go()">Output value here</output>   <!-- Executes the go() function -->

onresize - The JavaScript code to be run when the browser window is resized.


<output onresize="go()">Output value here</output>   <!-- Executes the go() function -->

onscroll - The JavaScript code to be run when the scrollbar of an element is being scrolled.


<output onscroll="go()">Output value here</output>   <!-- Executes the go() function -->

onunload - The JavaScript code to be run once a page has unloaded or the browser window has been closed.


<output onunload="go()">Output value here</output>   <!-- Executes the go() function -->

Document Element

oncopy - The JavaScript code to be run when the user copies the content of an element.


<output oncopy="go()">Output value here</output>   <!-- Executes the go() function -->

oncut - The JavaScript code to be run when the user cuts the content of an element.


<output oncut="go()">Output value here</output>   <!-- Executes the go() function -->

onpaste - The JavaScript code to be run when the user pastes some content into an element.


<output onpaste="go()">Output value here</output>   <!-- Executes the go() function -->

Drag and Drop

ondrag - The JavaScript code to be run when an element is dragged.


<output ondrag="go()">Output value here</output>   <!-- Executes the go() function -->

ondragend - The JavaScript code to be run when an element has stopped being dragged.


<output ondragend="go()">Output value here</output>   <!-- Executes the go() function -->

ondragenter - The JavaScript code to be run when an element has been dragged to a valid drop target.


<output ondragenter="go()">Output value here</output>   <!-- Executes the go() function -->

ondragleave - The JavaScript code to be run when an element leaves a valid drop target.


<output ondragleave="go()">Output value here</output>   <!-- Executes the go() function -->

ondragover - The JavaScript code to be run when an element is being dragged over a valid drop target.


<output ondragover="go()">Output value here</output>   <!-- Executes the go() function -->

ondragstart - The JavaScript code to be run at the start of a drag operation.


<output ondragstart="go()">Output value here</output>   <!-- Executes the go() function -->

ondrop - The JavaScript code to be run when dragged element is being dropped.


<output ondrop="go()">Output value here</output>   <!-- Executes the go() function -->

Form

onblur - The JavaScript code to be run on abort.


<output onblur="go()">Output value here</output>   <!-- Executes the go() function -->

onchange - The JavaScript code to be run when object changed and attempt to leave field.


<output onchange="go()">Output value here</output>   <!-- Executes the go() function -->

oncontextmenu - The JavaScript code to be run when a context menu is triggered.


<output oncontextmenu="go()">Output value here</output>   <!-- Executes the go() function -->

onfocus - The JavaScript code to be run when the element gets focus.


<output onfocus="go()">Output value here</output>   <!-- Executes the go() function -->

oninput - The JavaScript code to be run when an element gets user input.


<output oninput="go()">Output value here</output>   <!-- Executes the go() function -->

oninvalid - The JavaScript code to be run when an element is invalid.


<output oninvalid="go()">Output value here</output>   <!-- Executes the go() function -->

onreset - The JavaScript code to be run when the reset button of a form is clicked.


<output onreset="go()">Output value here</output>   <!-- Executes the go() function -->

onselect - The JavaScript code to be run when some or all of the contents of an object are selected.


<output onselect="go()">Output value here</output>   <!-- Executes the go() function -->

onsubmit - The JavaScript code to be run when a form is submitted.


<output onsubmit="go()">Output value here</output>   <!-- Executes the go() function -->

Keyboard

onkeydown - The JavaScript code to be run when an element is in focus and keyboard key is pressed.


<output onkeydown="go()">Output value here</output>   <!-- Executes the go() function -->

onkeypress - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<output onkeypress="go()">Output value here</output>   <!-- Executes the go() function -->

onkeyup - The JavaScript code to be run when an element is in focus and keyboard key is released.


<output onkeyup="go()">Output value here</output>   <!-- Executes the go() function -->

Media

oncanplay - The JavaScript code to be run when a file has buffered enough so it is ready to start playing.


<output oncanplay="go()">Output value here</output>   <!-- Executes the go() function -->

oncanplaythrough - The JavaScript code to be run when a file can be played all the way to the end without further need of buffering.


<output oncanplaythrough="go()">Output value here</output>   <!-- Executes the go() function -->

oncuechange - The JavaScript code to be run when the cue changes when using the track element.


<output oncuechange="go()">Output value here</output>   <!-- Executes the go() function -->

ondurationchange - The JavaScript code to be run when the length of the media is changed.


<output ondurationchange="go()">Output value here</output>   <!-- Executes the go() function -->

onemptied - The JavaScript code to be run when a media resource element suddenly becomes empty, usually due to an error.


<output onemptied="go()">Output value here</output>   <!-- Executes the go() function -->

onended - The JavaScript code to be run when the media has reach the end.


<output onended="go()">Output value here</output>   <!-- Executes the go() function -->

onloadeddata - The JavaScript code to be run when media data is loaded and playback can start.


<output onloadeddata="go()">Output value here</output>   <!-- Executes the go() function -->

onloadedmetadata - The JavaScript code to be run when metadata has been loaded.


<output onloadedmetadata="go()">Output value here</output>   <!-- Executes the go() function -->

onloadstart - The JavaScript code to be run when the media resource has started loading.


<output onloadstart="go()">Output value here</output>   <!-- Executes the go() function -->

onpause - The JavaScript code to be run when the media resource has been paused.


<output onpause="go()">Output value here</output>   <!-- Executes the go() function -->

onplay - The JavaScript code to be run when the media resource starts playback.


<output onplay="go()">Output value here</output>   <!-- Executes the go() function -->

onplaying - The JavaScript code to be run when playback has already begun.


<output onplaying="go()">Output value here</output>   <!-- Executes the go() function -->

onprogress - The JavaScript code to be run when the browser is fetching the media data.


<output onprogress="go()">Output value here</output>   <!-- Executes the go() function -->

onratechange - The JavaScript code to be run when the playback rate changes.


<output onratechange="go()">Output value here</output>   <!-- Executes the go() function -->

onseeked - The JavaScript code to be run when the seeking attribute is set to false indicating that seeking has finished.


<output onseeked="go()">Output value here</output>   <!-- Executes the go() function -->

onseeking - The JavaScript code to be run hen the seeking attribute is set to true indicating that seeking is currently active.


<output onseeking="go()">Output value here</output>   <!-- Executes the go() function -->

onstalled - The JavaScript code to be run when the browser is unable to continue fetching media data.


<output onstalled="go()">Output value here</output>   <!-- Executes the go() function -->

onsuspend - The JavaScript code to be run when media data has stopped before being completely loaded.


<output onsuspend="go()">Output value here</output>   <!-- Executes the go() function -->

ontimeupdate - The JavaScript code to be run when the media resources current playback position has changed.


<output ontimeupdate="go()">Output value here</output>   <!-- Executes the go() function -->

onvolumechange - The JavaScript code to be run when the volume has changed or been muted.


<output onvolumechange="go()">Output value here</output>   <!-- Executes the go() function -->

onwaiting - The JavaScript code to be run when the media resource has paused but is expected to resume.


<output onwaiting="go()">Output value here</output>   <!-- Executes the go() function -->

Mouse

onclick - The JavaScript code to be run when a mouse is clicked on the element.


<output onclick="go()">Output value here</output>   <!-- Executes the go() function -->

ondblclick - The JavaScript code to be run when a mouse is double clicked on the element.


<output ondblclick="go()">Output value here</output>   <!-- Executes the go() function -->

onmousedown - The JavaScript code to be run when the mouse button is pressed down while the cursor is over the element.


<output onmousedown="go()">Output value here</output>   <!-- Executes the go() function -->

onmousemove - The JavaScript code to be run when the mouse button is moved.


<output onmousemove="go()">Output value here</output>   <!-- Executes the go() function -->

onmouseout - The JavaScript code to be run when the mouse cursor moves off an element.


<output onmouseout="go()">Output value here</output>   <!-- Executes the go() function -->

onmouseover - The JavaScript code to be run when the mouse cursor moves over an element.


<output onmouseover="go()">Output value here</output>   <!-- Executes the go() function -->

onmouseup - The JavaScript code to be run when the mouse button is released while the cursor is over the element.


<output onmouseup="go()">Output value here</output>   <!-- Executes the go() function -->

onwheel - The JavaScript code to be run when the mouse wheel rolls up or down over an element.


<output onwheel="go()">Output value here</output>   <!-- Executes the go() function -->

Window

NONE

go to home page Homepage go to top of page Top