skip to content

HTML <output> Tag

In this final installment of "what's that weird html tag?", we're taking a look at the <output> tag.

The <output> tag provides a method of outputting calculated input data. The output tag could be used when calculating server costs, when showing the result of an interest rate calculation and so on.

The tag is used like so <output name="result"></output>, and provides the following attributes:



Output = 105


<div id="form-container">
    <form id="calc" oninput="calculation.value = parseInt(number_one.value)+parseInt(number_two.value)+parseInt(number_three.value); number_one_output.value = parseInt(number_one.value); = parseInt(number_one.value)-2 + '%';">
        <output name="number_one_output" id="number_one_output" for="number_one" form="calc">65</output><br>
        <input type="range" name="number_one" id="number_one" value="65"><br>
        <input type="number" name="number_two" id="number_two" value="30"><br>
        <select name="number_three" id="number_three">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
            <option value="60">60</option>
            <option value="70">70</option>
            <option value="80">80</option>
            <option value="90">90</option>
            <option value="100">100</option><br>
        Output = <output name="calculation" id="calculation" for="number_one number_two number_three" form="calc">105</output>

Browser Support

The <output> tag is widely supported, only lacking behind in Internet Explorer.

See for more info.