<output> HTML element is used to display the result or output of a calculation or user action within a form. It provides a way to present dynamically generated content or processed data to the user.
Here’s an example of how to use the
<form oninput="result.value = Number(a.value) + Number(b.value)"> <input type="number" id="a" name="a" /> + <input type="number" id="b" name="b" /> = <output name="result" for="a b"></output> </form>
In this example, the
<output> element is used to display the result of adding two numbers entered by the user. The
<input> elements with
type="number" capture the numeric values, and the
oninput attribute calculates the sum of the two input values and assigns it to the
value attribute of the
<output> element. The
name attribute on the
<output> element is used to associate it with the input elements using the
for attribute, so that it displays the result of their combined values.
<output> element can also be used to display the result of other types of form elements, such as checkboxes, radio buttons, or sliders. It can be styled using CSS to change its appearance, such as font style, color, or positioning, to match the design of your website.
It’s important to note that the
<output> element is not restricted to calculations or form-related data. It can be used in various scenarios where dynamic output or result display is required.
In summary, the