 |
| USE OF HTML5 OUTPUT TAG |
HTML5 <output> Tag
The HTML <output> tag represents the result for calculation. This is a form element. It is used to show the output after the calculation which performs the values entered in the form.
You have seen many sites which perform some kind of calculation and show the results. Such as which provide services of the calculator, convert binary into decimal, and convert the measurement (Feet, Centimeter) etc.
You have seen many sites which perform some kind of calculation and show the results. Such as which provide services of the calculator, convert binary into decimal, and convert the measurement (Feet, Centimeter) etc.
Similarly, there are many other types of sites like related to tax, insurance, and loans etc. which show results by performing the calculation. Before HTML5, there was no way to mark the results shown by these sites but HTML5 has introduced the <output> element to mark results produced by web applications.
Syntax of HTML5 <output> Tag
The general syntax of the <output> tag is given below.
<output> Result here </ output>
As you can see in the above syntax, this tag does not have any value attribute. The result is shown as text between the opening and closing tags by the <output> tag.
Attributes of HTML5 <output> Tag
You have three attributes available with the <output> tag. These are given below.
for
In this attribute, those elements are defined which have been used in value calculation. The id of these elements is written separately from the comma in this attribute. For example, if you are entering 2 values from text to the user in the text box, then in this attribute, both text boxes will be written separately from id comma. The syntax of this attribute is given below.
form
This attribute is defined by the form, which is output related. The id of the form is specified as the value of this attribute.
name
The output tag is defined by the attribute.
The <output> tag also supports all Global and event attributes of HTML.
Example of HTML5 <output> Tag
<!DOCTYPE html>
<html>
<style>
output
{
background-color: red;
color: white;
padding: 10px;
}
</ style>
<body>
<form onsubmit = "return false" oninput = "result.value = parseInt (a.value) + parseInt (b.value)">
<input type = "number" id = "a">
<input type = "number" id = "b">
<output name = "result" for = "a b"> 0 </ output>
</ form>
</ body>
</ html>
In the above example, the value of the user input box will change and the output value will also change. This example produces the below output.
 |
| HTML5 output Tag example |
Compatible Browsers
The list of the browser's first version which supports output tag.1. Google Chrome 10.0
2. Firefox 4.0
3. Internet Browser 13.0
4. Opera 11.0
5. Safari 5.1
<< PREVIOUS NEXT >>
I am really impressed together with your writing abilities and
ReplyDeletealso with the structure in your blog. Is that this a paid subject
matter or did you modify it your self? Either way stay
up the excellent high quality writing, it is rare to
see a nice blog like this one these days..
Quality content is the crucial to invite the people to
ReplyDeletepay a quick visit the site, that's what this site is providing.