<output>

<output> Tag

The <output> tag in HTML is used to represent the result of a calculation or a user action. It is commonly applied within forms to display outcomes based on user input or calculations.

Syntax

<output for="inputField" name="result">Result will appear here</output>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  + <input type="number" id="b" value="50">
  = <output name="x" for="a b"></output>
</form>

Attributes

for Attribute

Specifies a space-separated list of IDs referencing other elements, indicating that their input values contribute to the displayed result.

form Attribute

Defines the ID of the associated form. If omitted, the <output> element must be inside a <form>. This enables placement of <output> elements anywhere in the document while still linking them to a form.

name Attribute

Assigns a unique identifier to the <output> element, allowing it to be referenced in scripts or when submitting form data. This is useful for organizing and retrieving calculated values.

Default CSS Settings

By default, most browsers render the <output> element using the following styles:

output {
  display: inline;
}

See Also

Explore other form-related elements:

<form> <input> <button> <datalist> <legend> <label> <select> <optgroup> <option> <textarea> <fieldset> <progress> <meter>.

Conclusion

The <output> tag is used to display the results of calculations or user interactions within HTML forms. It dynamically updates based on linked input elements using the for attribute. The name attribute provides a unique identifier for referencing the output in scripts or form submissions.