Hello everyone. In this chapter we're going to learn about forms, how we can create forms with different components available in HTML. Of course, whenever you create a form, you're going to infer some fields in order to capture data from the user. Whenever you need to send this information to the server, you need to have server technology like ASP. NET, Java, UI, PHP, or whatever server side technology. So in HTML, you only learn how to create the form in order to capture data, but how to process it.

This is totally different from HTML, and you must learn and server side technology. Of course, during the john Nisa, I promised you that we're going to learn courses one by one In order to reach to Java UI and how we can capture this information from the HTML point of view, you need to learn only how to create. So for now, this is an example that we need to produce. We're going to learn different components of HTML. Lucky luck, this is a 16th. This is a thick area staining some rows.

This is a combo box. This is a nice box. This is as you see, is this a different type of combo box, all you have it divided into some options like this. You have a radio button. As you can see, like it looks differently like this. And also this is check box.

This images who sent in key Let us take a look over the source in order to understand that we can generate a file like this. Now, you start the form by mentioning take for Okay, this is enter you need this is normal, this is normal is nothing new here, but now I have an input i equals that, okay. So input This means pick a string so that you can call its type is text. Okay, so this is a terrorist component in order to capture data that you can enter only one line at a time. But if we if we need to have something like address or whatever, or you need some space some more space With multiple rows, so in this case, you use a case area, you have some attributes columns is four columns, this is 40 columns, rows equals four, I have four rows.

So if I say something like this, I can have four rows without scrolling, if you increase more like this, okay, as you can see, it moves to the line like this and you have to scroll about in order to navigate up and down. And in modern browsers, you have this option or the increase the area on time, like this. Now I need to have a combo box list of options like this. So I use select a city Let me use a combo box it's nice to have items that I need to select from each option is written using coercion pick. So this is option take and this is my option whenever you add an option, then you're adding another option available in a combo box like this Scheuer four options here. So I have four options they can be, then of course you close a select tag and this is just two lines close up I have some spacing between one form 10 deals.

Now, interests income books, only one option is appearing you must delete in order to see more options, but they need to make them appear without clicking. Then you use just an attribute Name size size equals three. This means I have three items available without scrolling. So I can see really three items, though you have more like I have, if I scroll down on him some more okay, but only three options are available out scroll. And whenever you mentioned multiple This means user can select multiple items. I have two ways in order to select multiple items.

If they are consecutive, then I can click this option then hold down the shift key then clicks on last option is going to live from the stock Tilden. But if I need to, to only check some items that are not prosecuting, then I can hold down the Ctrl key then click the items we need. Like this. So this is how we use a multiple option. No, in this combo box you have something like two levels of selection, like I need to select the course for example, so I need to group it. So Word and Excel or for end user, for example, a developer has Java and C sharp code design is HTML code page.

And Dreamweaver knows that you can not select the group like I cannot select word design, but I can select these items, Java C sharp or Excel, but I cannot select developer in order to create this. Then simply, you mention an option go over at group option group labeled is a user. Okay, so this is what they have. This is option go in user, then it's items on mentioned like this, then I close my option go and start a new option group they will be called the robot. Okay, this is how it looks like. And as you can see it appears like to live in menu like this.

So these are the options inside the second option and they can create as many of course as many option groups that they need. This is a saved option group or design these options inside. Then finally, you close your selection. So I only change it and close my combo box. Now in order to create an appearance like this, then you simply use them Important fields set in fill in the set, you group some fields and create them as a set of go. So it has a title.

Okay, as you can see there is some border surrounding the fields. It has a Python, this typing is mentioned using lesion. lesion dictate. So, in lesion, this is like the title of the field set. Then I can use text field, the combo box, whatever we're learning here, how to use radio buttons like this. So input type equals radio and it has a name equals gender and another breed you both Name, it has the key it has the same name.

Why, in order to use in as a group where you can only select one option. So as you can see here that we have name equals gender name equal gender. This means I can select only one choice for me and TV. And I have here on those are radio buttons, I can only select one option from the city. So in order to create groups with radio button, you need to have this team name. So this is name equal gender, this must be exactly the same name.

And the same applies here, which is the same thing almost like I have three radio buttons like this. They must have the same name so that I know it's a group, they can only select one option from these blue now, we have some attributes, one that reboots is checked. As you can see, whenever you open your vote this time, I have this option selected by default and this option is selected by default, but still I can change it. So, in order to create this, just go to the option that you need to make it by default and as you check like this this is one thing. You have also something called access key. access key means what?

Like there is something called like a shortcut like I can use a keyboard in order to check it. Of course, you can have this option but it is different from one browser to another some browsers use control with all along with the access key later, in order to send that in. Some browsers use some browser use control, whatever you need to check with the browser in order to know how you can use the access key. So simply, you use the letter M along with a combination of the status in order to create and select the options that you this is regarding access key. Okay, now, we have discussed the radio button and now we can understand how we can create different sets. So that we can have only one selection at a time from different cells.

Also, regarding checkbox, like I use also period set with religion in order to have a function like this. Now, we go to options are in their input type equals check box. So this is how you have a check box. But of course in check box, I can submit as many items as in the radio bubble, you can only have single single check box you can have multiple selections like this. Okay, now we have a button. This is a welcome in button I can create as many items that need to be included inside of apple.

So for example, here I've never bought one it has a text appearing like this. Then I have an image appearing like this poses. Now I can use the images in order to create a button and still you can use stickers as well. Then you have input type equals submit with very equal sin data. Okay, what is this, this is about and this is a label, send data is a value. This is written here.

Whenever you click send data, this means I need to submit my data pools are simple. And again, I emphasize that you can not use these buttons unless you have server side technology. Like as I mentioned, Java, ee, HP, dotnet, PHP or whatever. This is another course that you're going to learn later, but from HTML point of view, this is how you can then you have another type called reset. Like for example, with a sales type some values like this one song selections are changing in mid song selection. Sounds like this whenever you click on clear data, clips or information and return back to the default selection.

So, as you can see that I mean everything, everything returning to the default. So this is this is this button is working, no need for simple technology increases or selection and returns back to the default options. So this was really quite a big example showing all types of controls. So you have learned about this clicks within this area, combo box, list box, option groups, field set and vision. This is also the radio button, check boxes, images with buttons, submit button and reset button. So we have covered almost all countries roles in HTML.

So it was quite a big example containing a lot of details, but it is quite useful. And now you're able to design any kind of forms. When you're going to have one exercise, like in order to make things look much more organized, you can use tables to create this. So you have an assignment. Now you have no help use tables, or need to have a table data or this information or the label observe you add another table data for the control that I'm going to use. In this case, you're going to produce much more organized output.

This is an exercise and assignment for you. You can apply this so that you learn how you can combine images, tables, phones, and combined All the chapters that we have learned before. Hope you guys enjoyed this chapter to the next chapter. Thank you