HTML Forms - The <output> Element

Back in the HTML Forms — Advanced Input Types chapter, we came across the range input, denoted as <input type="range">, which renders a slider input to select a number within a range.

There we specified that a range input doesn't showcase its current value to the user; this is something we manually ought to script using some JavaScript. In addition to this, we also specified that the element precisely meant to hold the current value of a slider input is <output>.

In this chapter, we shall understand what exactly is the purpose of the <output> element in HTML and how to use it for showcasing the current value of a range input besides other possible uses of it.

Let's start by defining the <output> element:

To better understand this definition, let's consider an example — the same range input example that we talked about at the start of this chapter.

When you interact with a range input, moving its slider button to the left or to the right, what are you doing? Well, essentially, you're interacting with the input. The result of this simple interaction is that the number represented by the input gets changed.

And there we have it. We have an interaction that causes something to be changed — in this case, the number of the range input — and so the resulting number is the perfect candidate for the <output> element.

Again, why is that so? Simply because the number is the result of an interaction.

Similarly, let's say we have a color input. As you may know, a color input doesn't represent the hex code of the color it currently holds. If we wish to showcase the hex code right next to the input, we have to manually do so, again using some scripting.

The point is that as we interact with the color input, changing the color, the corresponding hex code also changes. We once again have an interaction, i.e. choosing a color, and a result of that interaction, i.e. a changed hex code. Therefore, the hex code is the perfect candidate for <output>.

Fairly simple, isn't it?

If we see <output> in the wording of the HTML standard, it goes something as:

The output element represents the result of a calculation performed by the application, or the result of a user action.

The latter point here, 'result of a user action', has been made clear by the examples above. But what does it mean by the 'result of a calculation'?

Well, examples to the rescue...

Let's say we have two number inputs representing two numbers to be added together in an HTML form. When either input's value changes, the sum also changes.

This is basically a calculation whose result, which is the sum of the two numbers in the number inputs, should be placed within the <output> element.

Alright, with this high-level understanding of the <output> element gained, let's now see how to actually use it.

The <output> element's content model is the same as that of the <p> element, likewise whatever we can put inside a <p> element, we can put that inside <output>.

Besides this, there are a couple of attributes that can be set on the <output> element, summarized as follows:

Perhaps, for and name are the most useful attributes.

The for attribute

The value of the for attribute of <output> is a space-separated sequence of element IDs (obtained via the id attribute).

For example, in the following code, the <output> is for the <input> element with id="name":

<input type="text" id="name">

<output for="name"></output>

Similarly, if we have an <output>'s content dependent upon two controls, such as in the example we talked about earlier with two number inputs being summed together, we'll do something as follows:

<input type="number" id="a">
<input type="number" id="b">

<output for="a b"></output>

The id values of both the inputs is given one after another in the for attribute, separated by a space.

The name attribute

Contrary to form control elements in HTML, where the name attribute represents the name of the underlying field in the set of data submitted by the form, the name attribute of <output> does NOT work this way.

The name attribute of <output> is purely meant for ease of selecting the element in event handlers when we add interactivity using JavaScript (which we shall do shortly below).

In the following code, we give the <output> a sensible name (for referral later on):

<input type="text" id="name">

<output for="name" name="name_output"></output>

Scripting using oninput

As we know by this point, <output> is meant to hold content that results from user interactions with an HTML document. So quite sensibly, there's little reason to use <output> in an HTML document where there's no interactivity.

But how do we add interactivity to an HTML document? Well, that's the job of JavaScript.

Although it's not usually recommended to embed JavaScript into HTML, for such mere scripts as outputting the value of given inputs, we're absolutely fine to go this way.

When we interact with a form control, there is a JavaScript event called input that fires on that form control, and also on the underlying <form> element. We can handle this event by settting the oninput attribute on the form control (or the <form>) and then adding a small script in there.

Let's first see what this script is and then dissect it:

<input type="text" id="name" oninput="name_output.value = this.value">

<output for="name" name="name_output"></output>

Luckily, we don't need to know much of JavaScript to understand what's happening here, particularly inside oninput.

Basically, we're instructing JavaScript to set the value of name_output which is the <output> element (thanks to the application of the name attribute on it), via name_output.value, to the value of the underlying <input>, via this.value.

The equals sign (=) assigns this.value to name_output.value.

It's now time for a concrete example.

In this section, we shall make a range input interactive by tracking whenever its value changes (by means of moving the slider) and then respond to the change by outputting the current value in an <output>.

The example is of a range input representing the count of subscribers for the tier of an email service we wish to purchase, where the maximum count supported is 50,000.

First things first, let's bring in the range input (embedded inside a form):

<form>
   <label>
      Subscribers
      <input type="range" name="subscribers" min="1000" max="50000" step="1000" value="1000">
   </label>

   <br><br>
   <button>Submit</button>
</form>

As you can see, here we're practicing the knowledge we acquired in the preceding chapters — using the <label> element to hold the label of the form input; and the min, max and step attributes of the <input> to configure the precision of the input.

Live Example

So far, so good.

Now, let's bring in the <output> element where we'll eventually put the subscriber count of the range input. Also, let's name the <output> for convenient selection later on:

<form>
   <label>
      Subscribers
      <input type="range" name="subscribers" min="1000" max="50000" step="1000" value="1000">
   </label>
   <output name="subscribers_output"></output>

   <br><br>
   <button>Submit</button>
</form>

In our case, the <output> is for the range input, likewise, first let's give an id attribute to the input and then pass on this ID to the <output> element's for attribute:

<form>
   <label>
      Subscribers
      <input type="range" id="subscribers" name="subscribers" min="1000" max="50000" step="1000" value="1000">
   </label>
   <output name="subscribers_output" for="subscribers"></output>

   <br><br>
   <button>Submit</button>
</form>

Now, let's script the much awaited interactivity to bring the <output> to life.

<form>
   <label>
      Subscribers
      <input type="range" id="subscribers" name="subscribers" min="1000"
         max="50000" step="1000" value="1000" oninput="subscribers_output.value = this.value">
   </label>
   <output name="subscribers_output" for="subscribers"></output>

   <br><br>
   <button>Submit</button>
</form>

Live Example

In the linked page above, try interacting with the range input; you'll notice the current value of the input displayed right next to it, all thanks to some very elementary JavaScript and the <output> element.

So what do you say, wasn't this easy?