<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 (
num2) accept values from the user.
oninputevent calculates the multiplication of the entered values in real-time.
The computed result dynamically populates the
<output>element with the
forattribute 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.
<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.
In addition to global attributes, the
<output> element supports specific attributes:
|Specifies a list of element IDs that contribute to the |
|Associates the |
|Gives the |
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.
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
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
rangeinput using the
forattribute, developers can dynamically display the current value of the slider in a tooltip-like fashion.
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.