In this session, let us talk about the form tags in HTML. HTML form is used to collect user input angle bracket form is used to define an HTML form. The form elements are text field password radio button, which is used for single select checkbox for multi select a drop down which can be used for both single select and multi select text area for writing comments. then submit reset buttons are these three are buttons. If you use submit then the values will be taken to the backend reset the values will be cleared in the Form button. It is just a button.

If you want to handle anything on this particular button, you need to perform even handling. Now let us talk about the form elements one by one Let me first start with angle bracket form. This is used for creating a form that all the form elements should be added within this form tag only. So that's what I have done an angle bracket form and I am closing the form over here. All the other form elements should be added within this form that this form tag has got few attributes. Let us see three things name, action, and method.

Name is the name of the form. This will be used when you're doing validation with the help of HTML. Next action option specifies a web page name or the file name, which will be called when you click the submit button. That is, the values of the form will be taken to this particular page only. In my case, I have given demo dot html. When I click the submit button, the values of this form will be Control demo dot html.

Basically this is a static page. So you cannot retrieve the values in demo dot html. If you are working in a web application, in that scenario you are backing will be a servlet or a PHP then you can retrieve the values. But here I have given an HTML page only. So I cannot retrieve the values in the HTML page. Then method method equal to get an method equal to post.

When I say method equal to get whatever values the user is entering in the form will be shown in the URL itself. If I give a method equal to post, whatever values the user is entering, it will be carried in the body part of the request. When you click Submit button, your request is created and it goes to the backend. Basically, a request has a header and a body part. The header is going to abrogate header details, what type of content it can accept, and what doesn't. The size of the content then what is the browser the user is using what is the session ID.

So, these kinds of header details will be available in the header and if you have a body part, if you are using get method that whatever the user is entering, that also will be attached as a query string in the header itself. If you are using methods POST method as post in that scenario, the values whatever the user is entering will be carried in the body but we I will explain you while doing the program you will be seeing the values whatever the user has entered in the URL itself. So, this is the first step Next, let us start with text field. For creating a text fields you need to use input tag input type equal to text. Similar to this if you want to create a password fields are a radio button or a checkbox Submit button or reset But then you need to go in for input tab only, only that type value changes.

Now, okay, we will be discussing about that later. Now let me talk about this text field input type equal to text. This is having few more attributes name equal to ID value and placeholder, what is the use of name. whatever value the user is entering, that has to be carried to the backend, it is carried only by name that is in the backend. If you want to retrieve the value, you have to use the name of this particular form field. What is the use of this ID if you want to retrieve the value using JavaScript, you will need this ID if you want to perform validation or if you want to perform styling for this text field.

Again, you need this ID. So, ID is used by JavaScript and styling our CSS and name is used by the Back in placeholder, placeholder is nothing but a shadow text, it will be I mean, you if you go into certain websites when you are seeing your form you will be seeing enter name, when you keep the cursor, actually it is only a shadow text so, it will not be you don't have to delete it, there is something called us value. If you specify value equal to raw, if you open the text field or if you open the form, ROM will be entered in that text field, you need to delete it and then only you can enter your value. So, that is a difference between value and placeholder. placeholder is something like a shadow text value is the original value that is entered there. If you want you can just delete it and enter your own value or you can just go with the default.

Next, let me move on to passwords similar to text field only. But in case of type you are specifying input type equal to password. This also has gone name so that the value can be retrieved in the backend. It has got ID to your to be used by JavaScript and CSS and placeholder for placeholder again, it is a shadowy text. Of course, we will not do value because it is a password right. Next radio button radio button allows only single select.

So you need to create multiple radio buttons with different values and group them together with a single name. Suppose say, I want to create radio buttons for subjects. So math, science, arts, physics, so there are values why I want to group them into a single category. So I need to give the same name name a subject and value is going to be different. I have shown a simple example. I have got input type equal to radio I want to use gender so I have given the value of male and female and the name I have given us the same If you are giving different names it means the first one belongs to a different group, the second one belongs to another group.

So it will allow you to select both in the scenario because they belong to the same group you can select only one What is the use of this value, this value is used to be carried to the back end. What is the use of this check that review if you specify check the call to check that particular radio button will be checked by default. Next checkbox checkbox is similar to radio button but it will allow multiple select here also you need to group them together, the value is going to be different but the name is going to be same. So here I have created four checkboxes, the name is same here I am allowing my people select so it will be in the form of square box. And whatever you have given over here, outside will be visible to the user and whatever Given in value will be taken to the backend, it is not necessary that the value and whatever you're showing to the user should be saved.

In case of sports I can even have it as zero in case of dance 123. So what will go to the backend, the backend solid might be receiving it as 0123 not as for dance music, right drop down. To create a drop down list you see selected. This select tab also has got name and ID name and for the backend ID is for JavaScript and CSS. By default, a drop down allows only single select if you want to do multiple select multi select use multiple attributes. And in case of multi select, if you want to show few items to the user, you can just specify the size also.

I have given size equal to three so three items will be visible to the Rest of the items if you want to see you have to scroll down this select stack has got changed that the name of the child tag this option, this option is having value and outside also I have given some value, what is the difference, whatever is shown outside will be visible to the user, whatever you are writing over here in value will be taken to the backend. As I told you in the previous case, I don't have to specify a value equal to Java JSP Spring and Hibernate, I can simply use 01234. So, in the back whenever the values are carry, it will be carried as 01234 only. So, depending upon your requirement, you can just pass on the values. So, this is for drop down. Next text area text area basically is used for comments section.

Eight is going to have number of rows and number of columns. Specify how many rows you want and how many columns you want. So here take Syria rows equal to 10 called SQL to 10. So it is create a box with 10 rows and 10 columns submit and reset the Submit and reset our buttons. They are used with input tax. If I specify input type equal to submit it becomes a submit button on clicking the submit button the values whatever the user has entered will be taken to a page that is specified in the action attribute of the form.

And next reset if you specify input type equal to reset whatever the user has entered will be cleared automatically. So this is for type equal to submit and type equal to reset. Next button. To create a button you can either go in for this button tab or you can use input type equal to button. When you do this, only a button will be created. On clicking off this what will happen Nothing will happen, because you have not used any event handler.

If you want to handle an event on a button click, you need to do it specifically by using JavaScript. So, these are the form elements. What we have seen till now is what is the form tag. And what are the child tags that can be added within this form that the child elements are made. input type equal to take input type equal to password input type equal to radio input type equals checkbox. Select that for creating a drop down, then text area for creating a text area.

Then input type equal to submit input type equal to reset and the use of button. Of course, the use of button you cannot just grasp it now, once when you're learning JavaScript, you will really understand what happens when you click a button because you will be learning even handling. So this is all about the false elements in the next session, let us see an example of working with forms. Thank you