In this session, let us see an example of working with forms. I have created a HTML file from demo, I have kept the browser and Sublime Text side by side so that you can see the output immediately. The first tab to work with the HTML form a form tag. So let me add that from action equal to the value of this action. When you click the submit button, to which page you want to go, so that file name should be specified in action. So I will use IMG demo dot html, because this is a file which is available in my folder.

The next attribute is method method equal to get our post. The default value for the method is get only even if you don't specify it will take I mean, take the value was good Next name equal to this name attribute will be used only when you are doing farm validation using JavaScript. Now I am closing the form within these two form tags Only you need to add all the other form elements. Let me first start with text field. So I will just type enter name. input type equal to text.

Name equal to username. Then Id equal to username or you name it can be same or different. Then value equal to ram then placeholder equal to enter name. If you give value you cannot see the placeholder properly then enclosing the input tag. Now let me save this right click open in browser you can see the output enter name is what do you have given over here and because you have entered the value the value shown over here so now what I will do I will remove this value attribute it we save this, I'll refresh again. Now we can see this enter name which is sitting as a shadow IT TAKES I can type anything on that right Okay, next let me add input type equal to password.

If I don't give a br tag everything will come in the same line. So let me add the br tag also. Then, it is input type equal to password. So it says enter password. input type equal to password Okay, now have added this Password button name ID I have given the same name only as usual I have added a placeholder save it refresh. Can you see this Okay.

Next let us go in for the radio button. So, it says gender input type equal to radio name equal to r1 codomain. So, this will be the value which will be taken to the backend either you can have the same value as that of the text that you are going to show it to the user. If you can have numeric values like 012 like that. Then here I will specify male similarly, for female input type equal to radio and now I want to change These two values together. So selected Ctrl D automatically will select the next appearance for now I can just change this to female that now let me refresh you can see gender male and female.

If you want to have anything checked you can just specify that also. So here I will just use checked save this refresh you can see next we need to have checkbox checkbox is also similar to radio button. So now I can just use the same content input type equal to checkbox Namie Koto, hobby and here value equal to sport so I can select these two together. Let me save this now. Okay the fish I have not given a br tag so everything is getting printed in Same line, softer female am supposed to give a big attack, then hobbies save refresh right now here I can select multi multiple, because it is a checkbox here also as a tool, here I have given r1 So, they belong to the same group. If I specify the name different in case of radio button, it means they are two different groups.

In this case what it will do it will allow me to select both see. So you have to be very careful while grouping the radio buttons. So, this is for the checkbox. Next what we are seeing text area. So let me again add a br tag. For text area what is the tag, text area only text area, number of rows and number of columns Save this, come back and refresh.

Okay when extra angle bracket the stairs Can you see that the shown here in the end Okay, so I will remove this, save it as a fish Next I need to add some meat and reset buttons let me add that input type equal to submit and this is a button so you need to specify a value for the button like register click here add login. So now let me give a value value is equal to the distance This is for submit Same thing for reset also input type equal to reset value Use clear contents that are added by the user in the form. Let me save this and refresh. Okay here again I missed a big attack. Yes. And refresh now okay about register and clear button.

Now, let me expand this one. Let me add proper values, name a sa password. So whatever I'm entering will come in dots only. Okay. Then gender is selected hobbies I can select any number, and then I have to click Submit. When they click Submit, it will go to the form page which is given in the action attribute in action attribute I have given IMG demo dot html.

So whatever values the user is entering will be carried to IMG demo dot h. html. This is a static web application so you cannot retrieve the values from another HTML page. If you want to retrieve the values you need to send the values to a servlet are to a php page it is the back end. Now, let me simply click Register Have a look it is taking the values to IMG dot html, because you have used and used method equal to get all the values are shown as query string username equal to raw password r1 then hobby whatever you have selected is taken to the back end using this query string because we are given method equal to get now what we will do is we will go and change method equal to post. Let me save this I'll Refresh. Refresh.

Let me enter the values selected Now, click Register Now it is taking again to IMG demo dot html, but the values are not shown in the URL. The reason is the method is false. And the values whatever the user has entered is taken in the body part of the request. Okay, this is fine. Let me go back to the page, I've got all the values entered here right, now I want to clear it. So if I click this clear, automatically the value should be cleared.

Because the input type equal to reset that's what we have given. Now if you see the form, the form is not aligned properly. the right approach to add HTML form is within a table you need to create the table within the table you have to add the form like enter name, the label which should be one table data, yeah, the text fields should be another table data in the second row you enter password will be a table data, enter password field will be another take I mean, the password field will be the next two table data similar to that you can just follow Automatic HTML form using a table we have added everything but we forgot the drop down list. So let me add the drop down list also. So for the drop down list you need to go in first select. So let me add that Id equal to language and then I need to go in for option option value equal to Java, Java, whatever is returned here will be shown to the user and this will be taken to the backend.

Let me add the values. Let me add the options. Okay, have added the drop down also, after the Select I need a br tag, we go back to the browser and refresh. Now I have got that wrong. Don't Can you see this the right approach for adding a drop bonus? The first element in a drop down should be select what is that I will just show you shift option value equal to select.

I have added one extra option, option value is equal to select hyphen hyphen select. This is what you see when you go into any which website having a drop down. I'll save this let me refresh. Okay, so this is for single selects, what should I do for multi select for multi select one add an extract reviewed multiple and you need to specify the size also. Now I can do size equal to three. Saving this refresh.

Now we can see 1233 items are shown and it will allow me to do multi select also If I want to do multi select I can go in for shift or Control Shift means continuous select right. So I can select Java control HTML okay and I click register the values will be taken to the back end we use method equal to post now I will come back and change it to method equal to get okay now instead of sports music dance and drawing I will give values 0123 Let us see the difference right okay. Now, let me go to the browser I will refresh it. Now I will add the value some passerby will be okay and hobbies let me select all four share also I will select multiples Okay, comments ABC, let me click registers, you can see the values username and password is shown.

R1 a female that is radio button hobbies 0123. Why? Because whatever you have given in value only will be taken to the back end. And languages Java languages, HTML languages spring, what about the text area in text area, we have not added the name attribute. That is why that value is not taken to the backend. So, when you're working in HTML form, if you want to take the values to the backend, you need a name attribute.

If you want to perform validation for that form, you can go in for ID attribute. And you can perform the validation using JavaScript. There are basic html5 validations, which are available, which we will be learning in the upcoming sessions. These are all new features of html5. So I'm just showing it separately form element which we have not seen as this button. So let me add a button.

So I would say the form and go and add button. Just say add, add is nothing but the label of the button. So let me save this, I'll go and refresh in the browser. Now the Add button has come in the stage. When you know that when you click Register, the values will be carried to the next page. When you click Clear, the values will be cleared in this particular page, what will happen when you click this ad, nothing happens.

The reason is, you don't have an even handler for this button. That is on click of this button, what should happen that should be specified using an even handler. This can be achieved only with Java scripts. So while doing JavaScript, we will learn about this. So these are the basic form elements of HTML. There are few more form elements available, like input type equal to email, T and URL, date month.

These are added features of html5. So we will see them separately. Few things you need to remember about the forms, all the form elements should be added only within the form tag, then only the values will be carried to the next page. You can either go in for method equal to get and method equals our method equal to post. If you don't want to show the details in the URL, the best way best approaches use your use method equal to post. The action attribute specifies the web page to which you want to send the value.

So this is all about the form element. In the upcoming sessions. We will be talking about the features of html5. Thank you