<output> for semantic calculations / TIL / From the Python and Django developers at Lincoln Loop

The <output> tag is the preferred method of communicating the result of a calculation or user action. It's the perfect tag to communicate a shopping cart total, display form validation results, or deliver a player's score in a web-based game. Let's take a look at a simple example:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <h2>Widget price calculator</h2>
  <input type="number" id="qty" value="50">
  &times;
  $<input type="number" id="price" value="5" disabled>
  =
  <output name="x" for="qty price"></output>
</form>

View a demo here

What's neat is that the for attribute can reference multiple inputs, semantically noting that the inputs are linked. Additionally, the form attribute can be used to reference a form element outside of the <output> tag's parent form. This is useful for displaying the result of a calculation in a different part of the page. For example, imagine a complex calculator with a sidebar that displays the result (like a shopping cart).

Previously I would have used input[disabled] or an element undiscernable from on-page copy. Since I've started using this tag, I've noticed it's a little easier to read my code and identify where something will change in the UI.