• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

HTML5 Output Tag

March 15, 2014 //  by Krishna Srinivasan//  Leave a Comment

The <output> tag is used to display the result of the calculation. The content is written between the start and end tag of <output> tag. The HTML5 specification defines it as “result of calculation or an action”. If you look at the below example, this <output> tag simplifies the calculation of two fields by just taking the values and parsing it to the output field without any major extra work for the programmer.

Syntax of <output> tag

[code lang=”html”] <output name= ""> Text</output>
[/code]

Supported Browsers

<output> tag in HTML5 is supported in Firefox, Opera, Chrome, and Safari.

Attributes of <output> Tag

Along with the global attribute the following attribute are supported by <output> tag.

  • name: This attribute specifies the name of the tag.
  • form: This attribute specifies the output of an tag that it belongs. The value must be the ID of a form in the same document.
  • for: This attribute specifies the relationship between the result of calculation and the tags that represents the values of the calculation.

Output Tag Example

[code lang=”html”] <!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h4>Example of output tag using <i>name</i> attriute</h4>
<form oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number"> +
<input name="b" type="number"> =
<output name="o"></output>
</form>

<h4>Example of output tag using <i>name</i> and <i>for</i> attriutes</h4>
<form oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number"> +
<input name="b" type="number"> =
<output name="o" for="a b"></output>
</form>
</body>
</html>
[/code]

  • <form oninput= form oninput=”o.value = parseInt(a.value) + parseInt(b.value)”> tag is used to specify output of an tag that it belongs. The value must be the ID of a form in the same document

Example Application Test

  • Save the file as output_example.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

Output

When the execution process is completed successfully we will get the following output :
HTML5 Output Tag

Enter some numbers and you would see the result as shown below:
HTML5 Output Tag2

You can notice that if you enter only a single value, the function returns NaN. It’s effectively trying to add a number and an undefined value, and 1 + undefined = undefined as shown below:
HTML5 Output Tag3

Category: HTMLTag: HTML5

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « HTML5 Meter Tag
Next Post: HTML5 Progress Tag »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

np.zeros

A Complete Guide To NumPy Functions in Python For Beginners

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact