Struct Output 

pub struct Output;

The <output> element - represents the result of a calculation or user action.

Purpose

The <output> element represents the result of a calculation, user action, or the outcome of a script execution. It’s specifically designed to display computed values and results, typically from form calculations or JavaScript operations. Different from regular text in that it semantically indicates generated output.

Content Categories

• Flow Content
• Phrasing Content
• Palpable Content

Permitted Content Model

• Phrasing content

Common Use Cases

• Displaying calculation results in forms
• Showing real-time computed values
• Range slider value displays
• Form validation feedback
• Shopping cart totals and summaries

Key Attributes

• for: Space-separated list of IDs of elements that contributed to the calculation
• form: Associates with a form by ID
• name: Name for form submission

Example

<!-- Calculator result -->
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="result" for="a b">0</output>
</form>

<!-- Range slider value display -->
<label for="volume">Volume:</label>
<input type="range" id="volume" min="0" max="100" value="50"
       oninput="volumeOutput.value = this.value">
<output id="volumeOutput" for="volume">50</output>

<!-- Price calculator -->
<form oninput="total.value = (quantity.value * 10).toFixed(2)">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" value="1" min="1">
  <p>Price per item: $10.00</p>
  <p>Total: $<output name="total" for="quantity">10.00</output></p>
</form>

<!-- BMI Calculator -->
<form oninput="bmi.value = (weight.value / ((height.value / 100) ** 2)).toFixed(1)">
  <label for="weight">Weight (kg):</label>
  <input type="number" id="weight" value="70">
   
  <label for="height">Height (cm):</label>
  <input type="number" id="height" value="175">
   
  <p>BMI: <output name="bmi" for="weight height">22.9</output></p>
</form>

<!-- Form validation summary -->
<form>
  <input type="email" id="email" required>
  <output for="email" id="emailStatus"></output>
</form>

Accessibility

• Output values are announced by screen readers when changed
• Use aria-live="polite" for important dynamic updates
• Ensure output is clearly associated with input controls via for attribute
• Provide context for what the output represents
• Make output values visually distinct

WHATWG Specification

• 4.10.12 The output element

Trait Implementations

impl HtmlElement for Output

const TAG: &'static str = "output"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl<T: PhrasingContent> CanContain<T> for Output

impl FlowContent for Output

impl PalpableContent for Output

impl PhrasingContent for Output