There are quite a few popular websites that users frequently visit to perform certain calculations. Classic examples are bank websites which allow the user to calculate their monthly car loan installment or monthly credit card repayment amount. For all such calculations, users provide one or more inputs, which are then used to perform a calculation which is then presented to the user.
Classically web pages used to present the result in an input element.
With HTML5, web authors have an option to use a new element called the output markup element which was specially created to support displaying calculation results.
The HTML5 specification defines the “output” element as an element which represents the result of a calculation.
Source: http://dev.w3.org/html5/markup/output.html#output
The DOM interface for “output” element is
interface HTMLOutputElement : HTMLElement {
[PutForwards=value] readonly attribute DOMSettableTokenList htmlFor;
readonly attribute HTMLFormElement? form;
attribute DOMString name;
readonly attribute DOMString type;
attribute DOMString defaultValue;
attribute DOMString value;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(DOMString error);
readonly attribute NodeList labels;
};
The “output” element can be used in one or more of the following scenarios:
–
The “output” markup element is a type of phrasing content element. Any phrasing element can be the parent of a “output” markup element, and all global attributes are permitted.
In addition to global attributes, “output” markup element supports the following default display properties:
The typical default display properties are:
output {
display: inline; }
output {
unicode-bidi: –webkit-isolate; }
· Unlike a few other phrasing content element, an output element must have both a start and end tag.
Let us look at the source code of a simple HTML5 page which shows the “output” element.
<!DOCTYPE html>
<html>
<meta charset=”utf-8″>
<title>Output element sample</title>
<body>
<article>
<header>
<h1>Output element sample</h1>
<p>Demo showing output element in HTML5</p>
</header>
<form onsubmit=”return false” oninput=” totalamount.value = Math.round(principal.value * (Math.pow((1 + interest.value / 100), period.value)) * 100) / 100;“>
Principal<input name=”principal” id=”principal” type=”number”>
<br />
Duration<input name=”period” id=”period” type=”number”>
<br />
Interest Rate<input name=”interest” id=”interest” type=”number”>
<br />
Total amount <output name=”totalamount“ id=”totalamount“ for=”principal period interest”></output>
</form>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
</article>
</body>
</html>
The above code calculates the total amount with interest when the amount (principal), duration and interest of the loan are provided. It displays the result in the output element which is identified as ”Total Amount” in the web page.
When the above code is rendered in a browser which understand HTML5 (latest versions of browsers do), you will notice the “output” element gets populated/updated as soon as any of the three input fields get updated.
Here is how it looks in Chrome.
At the time of writing this article, the output element was not supported by other browsers like IE11.
You can see how the element displays in the browser just like a regular form element.
In this article, we learned how to use the progress markup element in HTML5 web pages. I hope you have found this information useful.
Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
