Menu
Forms & Inputs
<output>, <progress>, <meter>
Display calculated values, task progress, and known-range gauges.
1Showing Values
<output> displays a calculated result. <progress> is for tasks where you do not know the total speed (loading bars). <meter> is for known ranges like disk usage.
Example Code
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" value="2" /> +
<input type="number" id="b" value="3" /> =
<output name="result">5</output>
</form>
<progress value="32" max="100">32%</progress>
<meter min="0" max="100" low="33" high="66" optimum="80" value="78">
78 / 100
</meter>Finished reading?
Mark this topic as complete to track progress.