4 min read
ā¢Question 35 of 49easyWhat is the Output Element?
Displaying calculation results.
What You'll Learn
- Using the output element
- Connecting to form inputs
- Real-time calculations
The Output Element
The <output> element represents the result of a calculation or user action. It's semantic markup for values that are the product of other inputs.
Key Attributes
| Attribute | Purpose |
|---|---|
for | IDs of contributing elements |
name | Form submission name |
form | Associated form ID |
Calculator Example
index.htmlHTML
<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
index.htmlHTML
<form oninput="rangeOutput.value = rangeInput.value">
<label for="rangeInput">Volume:</label>
<input type="range" id="rangeInput" min="0" max="100" value="50">
<output name="rangeOutput" for="rangeInput">50</output>%
</form>Use Cases
- Real-time calculations
- Character counters
- Slider values
- Form totals