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:

  • for: Allows an explicit relationship to be made between the result of a calculation and the elements that represent the values that went into the calculation or that otherwise influenced the calculation. The value must be a list of IDs (separated by a space) of elements within the same document.
  • form: Associates the output with a form.
  • name: Specifies the name of this element.

Example

65


Output = 105

Code

<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); number_one_output.style.left = 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 />
  </select>
  Output =
  <output
   name="calculation"
   id="calculation"
   for="number_one number_two number_three"
   form="calc"
   >105</output
  >
 </form>
</div>

Browser Support

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

See https://developer.mozilla.org/ for more info.