In this session, let us discuss about the form elements that are introduced in html5. The three new form elements that are introduced in html5 output tax data list and key Gen. We will be discussing only about the output tax and the usage of data lists. In this particular session, we will see how to use this output tax our what is the purpose of this output tag. You know that whenever you want to get input from the user, you need to go in for the input tab. foreign aid has got different flavors, input type equal to text input type equal to radio or input type equal to check box. What if you want to throw some output to the browser.

In that scenario, you can use the new tab from html5 which is nothing but the output that this output tab is used to get the result of Our calculation earlier, when I want to do some calculation, I have to get the numbers and throw it to JavaScript in JavaScript, the work will be done. And then JavaScript will throw the result back to HTML. But now, with the use of this output tax, we can do it very easily. Let me explain you with an example. Have a look over here, I've got two input types, the type has given us number. Again, this is from html5 type equal to number, so it can accept only numbers.

But by default, I want to have a value. So I have given value attribute also value equal to 50 value equal to 120. Now I want to calculate the sum of these two numbers. How to do that. So we need a button on click of the buttons. I want to calculate the sum of these two numbers.

So what I have done, I have added a button input type equal to button value equal to add, what is the purpose of this value? Again, you know that it is a label for the button on click of this button, I want to calculate the sum How to Do I have to get the values how to get the value using the name number one dot value number two dot value whatever you are getting, it will be in the form of string only, you need to convert it for that we are using the JavaScript parse int method. So, I'm using pass into number one dot value plus pass in tap number two dot value. Now, I have got the shop back to store and how to throw it to the browser. For that we are going to use output tag output name equal to out always you know that name is the name of the tag value is the value of that particular tag.

Now, I want to throw the output through the route to the browser through the output tab. So, I need To write out that value for this output that the name is out, the value is the sum of these two numbers. That's what I have given. So when I click this add button, automatically it will do do a sum of these two numbers and add it to this output. One more thing about this output address, it should be added within the form tab, only then you can see the output Yes, it will throw an error in the console. Now, let us try this example.

In sublime, I have created a HTML page with the two input tags. The title has given us number four one I do not specify the value so at BMT for the second one I have specified the default value is 120. These two tags are added within the form tag, because we are going to use see how to use output tags. It should be within the form tab only. Now let me add a button. So I need to go in for input type.

Sequel to button. input type equal to button. I don't need the name value equal to add. Now let me save this. First let me open this in the browser I have bought output see the first number field is empty because we have not specified any value. The second one is having a default value.

Let me add a value to both upward and downward arrows. With the help of that we can choose the value RS we can just give the value directly. Let me click Add. Is there any event happening No, because we have not given any event. Now let me come back to this sublet. Let me add the event value equal to add on click equal to so what I need to do, I have to get number one dot pass in top number one dot value right pass in top number one dot value Plus pass into number two dot value.

Okay, now I bought the sum of these two numbers that to store it, I have to store it in an output and output that set of output name equal to Oh. And now here I need to specify on click equal to r dot value equal to path into number one dot value plus paths and number two dot value. Let me save this right now I'll come here refresh. When externals, like it is there and remove it, say, fresh. Now let me give the value 900 plus 120. Click Add.

Yeah, now I got the output. So if I want to throw some output to the browser, I can go in for the output tab. Let me show you one more example. I'm going to have a button on click off but I want to print a simple message. Let me add that Have a loop input type equal to button on click message dot value equal to hello world. And I have got output name equal to message.

So when I click this button, I have to get hello world. Let me just reload the browser save this refresh. I want a green button. Let me click this grid button and getting the output hello world. But the use of the output tab is to show results to the browser. This is all about output tab.

In the next session, let us see how to use the form element data list. Thanks