Intermediate LevelHTML & Semantic Web
How does the <output> element display reactive calculation results in forms?
❓ Interview Prompt: Explain <output> element, for attribute linking inputs, and displaying live calculated results.
The '<output>' HTML element represents the result of a calculation or user action inside a form.
'for' Attribute:
Links the output element to the IDs of the input elements used in the calculation ('<output for="price tax">'). Screen readers treat '<output>' as a live region, announcing updated calculation results!
Code Implementation Example
html
<form oninput="result.value = parseInt(a.value) * parseInt(b.value)">
<input type="number" id="a" value="10"> *
<input type="number" id="b" value="5"> =
<output name="result" for="a b">50</output>
</form>💡Displaying reactive calculation results using the output element and oninput handler.
🎯 Interview Key Takeaway
Use the <output> element with for="input1 input2" to display reactive calculation results accessibly.
#output tag#Form Calculation#Semantics#Intermediate
Back to all HTML & Semantic Web Questions→