<output>

Overview

The <output> element acts as a container meant to house the outcomes of calculations or results of user interactions. It's particularly relevant in the context of interactive forms, where it can be employed to provide real-time feedback or computed results to the user.

Examples and Usage

Let's observe a basic use case, and consider a user inputting numbers to be multiplied. The <output> element can be utilized to display the result.

<form onsubmit="return false" oninput="result.value = num1.valueAsNumber * num2.valueAsNumber">
 <input id="num1" type="number" name="firstNumber"> ×
 <input id="num2" type="number" name="secondNumber"> =
 <output id="result" for="num1 num2" name="multiplicationResult"></output>
</form>

In our example above:

• Two number inputs (num1 and num2) accept values from the user.

• The form's oninput event calculates the multiplication of the entered values in real-time.

• The computed result dynamically populates the <output> element with the id "result".

• The for attribute of the <output> element signifies its relationship with the elements with IDs "num1" and "num2".

For instance, if a user enters 3 in the first input and 4 in the second, the result will dynamically display 12.

While the <output> element's adoption isn't widespread, it holds potential in interactive web forms, especially when providing real-time feedback or computed results to users. Paired with inputs via its for attribute, it offers better accessibility and can even be associated with a <label>. However, some developers feel its true potential isn't fully realized, noting that its capabilities can often be matched by other elements.

Attribute Breakdown

In addition to global attributes, the <output> element supports specific attributes:

Accessibility Aspects

Many browsers implement the <output> element as an aria-live region. Specifically, the aria-live attribute indicates to screen readers that the content of an element will change without a page reload. This ensures that assistive technologies can announce updates inside the <output> as they occur, without the need to shift focus from the interactive elements that triggered the change.

Additional Notes

• Given its specialized nature, the <output> element might not be as commonly implemented as other HTML elements.

• Establishing a relationship between the result and input elements is simplified with the for attribute.

• A notable aspect of <output> is that its value, name, and contents are not included during form submission.

• An potential use case involves creating tooltips for range slider thumbs. By associating the output with the range input using the for attribute, developers can dynamically display the current value of the slider in a tooltip-like fashion.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: output

The HTML Living Standard Specification: output