Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<form oninput="result.value = a.value">
<input type="number" id="a">
<output name="result" for="a">
0
</output>
</form><span>, the <output> element has semantic meaning - it tells browsers and assistive technologies that this is a calculated result.<input id="num" />oninput event<output for="num">
Result
</output><form oninput="result.value = parseInt(num.value) * 2">
<input type="number" id="num" value="5">
<output name="result">10</output>
</form>Defines the output's name for form submission
<output name="result">Lists IDs of elements used in calculation
<output for="a b">Associates output with a form (if outside form)
<output form="form1">for attribute is optional but improves accessibility by explicitly linking the output to its input elements.| Element | Purpose | Semantic | When to Use |
|---|---|---|---|
<output> | Display calculation results | Form calculations, live results | |
<span> | Generic inline content | Styling, non-semantic text | |
<div> | Generic block content | Layout, grouping elements | |
<input> | User input (editable) | Form data entry, user interaction |
Math operations, currency conversion
Shopping cart totals, invoices
Slider value display, volume control
Temperature, distance, weight
Loan calculator, BMI calculator
Character count, word count
See how the output element displays live calculation results from form inputs
Simple calculator showing instant calculation results with output element
<form oninput="sum.value = parseFloat(num1.value || 0) + parseFloat(num2.value || 0)" class="calc-form">
<div class="calc-row">
<input type="number" id="num1" name="num1" value="5" class="calc-input">
<span class="operator">+</span>
<input type="number" id="num2" name="num2" value="3" class="calc-input">
<span class="operator">=</span>
<output name="sum" for="num1 num2" class="calc-output">8</output>
</div>
<small class="hint">Try changing the numbers - output updates instantly!</small>
</form>
<p class="note">➕ The <code><output></code> element automatically updates when inputs change</p>Loading preview...
for attribute to link inputsoninput for instant updates<span>)Play around with live calculations and output examples