Using the `for` Attribute on the `output` Element in HTML5

There are two things here that you’re probably already aware of. First, HTML includes an <output> element that allows you to display the “result of a calculation”. It’s a form element and it’s been around for some time, having been added in HTML5.

The other thing you’re likely to be aware of is that the for attribute is normally used on the <label> element to associate a <label> with a form element. This aids accessibility and usability, as you’ve probably discovered as both a developer and a user.

But interestingly, the for attribute can also be used on the <output> element:

<form id="myForm">
  <input type="number" id="num1" value="0">
  <input type="number" id="num2" value="0">
  <output id="op" for="num1 num2"></output>
</form>

Notice the space-separated num1 and num2 values, included in the for attribute on <output>.

In the section on the <output> element, the spec explains:

The for content attribute allows an explicit relationship to be made between the result of a calculation and the elements that represent the values that went into the calculation or that otherwise influenced the calculation. The for attribute, if specified, must contain a string consisting of an unordered set of unique space-separated tokens that are case-sensitive, each of which must have the value of an ID of an element in the same tree.

As an example, you might have something like the following in your JavaScript that uses the <output> element to display the result of the calculation:

myForm.addEventListener('input', function () {
  op.value = parseFloat(num1.value) + parseFloat(num2.value);
}, false);

Here’s an example demo that uses the above code:

See the Pen Using the `for` attribute on the `output` element by Louis Lazaris (@impressivewebs) on CodePen.

As shown in the demo, the two number inputs are responsible for the resulting display in the <output> element, hence the two space-separated values in the for attribute.

What are the Benefits?

There aren’t any immediate functional benefits to doing this. Also, as noted in the quote from the spec, using the for attribute is optional (it says “if specified”). The main benefit here is in terms of accessibilty and semantics. The HTML5 Accessibility project lists the <output> element as “Accessibly supported” and “mapped”, so the functionality opened up by this feature is available to screen readers if they choose to implement it.

The for content attribute allows an explicit relationship to be made between the result of a calculation and the elements that represent the values that went into the calculation or that otherwise influenced the calculation. https://t.co/3lgFQEItIX

— Steve Faulkner (@stevefaulkner) February 13, 2018

As shown by my discussion with accessibility expert Steve Faulkner, it’s good practice to include a for attribute for full support. Using the aViewer tool he demonstrated how this feature can potentially be exposed to assistive technology:

And as a side point here, it’s useful to know that only items classified as “labelable elements” can have the for attribute present, as shown in this chart in the spec.

As for browser support, IE11 and below are the only desktop browsers that don’t support the <output> element and its use of the for attribute.

What are the Benefits?

Leave a Reply