output element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Table of contents

01Description
02Examples
03Attributes
- Specific attributes
- Global attributes
04Events
- Global events

Description

The output element represents the output of a calculation or process, performed usually by a script. This calculation may be based on the values of form fields, in which case, the for attribute becomes semantically useful for referencing the elements or controls that took part in the process.

The output element is purely semantic and should be always used to show the results of a calculation or process carried out in the document.

The for attribute should contain a space-separated list of tokens, each of which should match the id attribute of an element or control used in the calculation.

Examples

In this example, we'll use the output element to show the result of a power operation between the numbers provided by a couple of number inputs. The operation will be carried by a client-side script defined elsewhere.

Note how the output element makes reference to both fields participating in the operation, by listing their id attributes in for. The controls, in the other hand, have their id attributes properly declared, for the output to make the reference and the script to retrieve their values.

<p>Base: <input type="number" id="base" value="0" min="0" max="30"></p>
<p>Exponent: <input type="number" id="exponent" value="0" min="0" max="30"></p>
<p><input type="button" value="Calculate" onclick="outputPower()"></p>
<p>Result: <output id="power" for="base exponent"></output></p>

Base:

Exponent:

Result:

Now, we'll simulate the reaction of people to the volume of music, using a range control, new in HTML5. The idea is to get the value of the range input and, based on it, show the public's response in the output element.

<p>Volume of music: <input type="range" id="volumeofmusic" onchange="outputAudienceReaction()"></p>
<p>Audience reaction: <output id="audiencereaction" for="volumeofmusic"></output></p>

Volume of music:

Audience reaction:

Lastly, we'll simulate a registration form, where a script checks immediately if the picked username isn't already registered in the website. Of course, this script doesn't have a database to check against, so it will just simulate the result randomly.

<p>
  Username: <input type="text" id="username" onkeyup="outputUsername()">
  <output id="usernameavailability" for="username"></output>
</p>

Username:

Attributes

Specific attributes

for

A list of space-separated tokens matching the values of the id attributes of the elements or controls participating in the calculation or process. This attribute is purely semantic.

Example

<p>
  Word: <input type="text" id="word" onkeyup="searchSynonyms()">
  <output id="synonyms" for="word"></output>
</p>

form

The value of the id attribute of the form with which this control is associated to.

This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.

Example

<form id="form1" oninput="suggestSimilar()">
  <p><input type="text" id="car" name="car"></p>
</form>
<p><output id="suggestions" for="car" form="form1"></output></p>

name

A name for the output to be used in form submission and client-side scripting.

Currently, the value isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.

Example

<p>
  Number: <input type="number" id="number" onkeyup="getSquareRoot()">
  <output id="squareroot" name="squareroot" for="number"></output>
</p>

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.