‫Hey, there.
‫Welcome back, Siobhan, the site.
‫Now let us discuss about forms here.
‫I remove all the previous code and created a new heading that we are open for registration something
‫like this.
‫And now we are going to add a home and complete this whole page.
‫If we have visited any web site on web or maybe on mobile application, chances are you have already
‫used a form.
‫Now forms are pretty important if it was any website.
‫Hey, you can see search to form.
‫Maybe you want to log in.
‫This one is going to be a form.
‫Maybe you want to create an account.
‫This is going to be a form, so every time they require some information from users, I create a form
‫so you can take example our contact form registration form log in form.
‫And there are several other requirements where you need some data from user, and that's where formal
‫consent of pitcher Robert Stock would.
‫It's pretty easy.
‫All you have to do is use form.
‫That's it.
‫And here we can start back on, you know how you can see this action.
‫What is this and how we are going to utilize it for now?
‫Just remove it.
‫We are going to add this again, but for now, remove this.
‫So the basic work with action is what to do with this data that we are collecting with form.
‫So you don't need to worry about the data part you need to understand about this structure, OK?
‫Now, with foam, we can have multiple fields, and every time we see any type of field, it is known
‫as input field.
‫So all you have to do is just jump ahead and add the input field.
‫Now here I'm going to utilize this input and this input field is going to be of different types.
‫Now X-Type basically means that you are going to accept X.
‫Also remember you don't need any closing tag for this input.
‫So if I jump here on here, you can see if input what field, which is inside our form.
‫Now we need something like this that can describe the name, so that is known as label, so we can add
‫a label here.
‫Now her label is utilized just to define that input fee.
‫For now, I'm just utilizing a text maybe name here.
‫And if I save this one, get back here, you can see its name and then my input for how we can do several
‫other things because here we are utilizing by best text, we can utilize other Typekit well.
‫Now what does this what attribute?
‫So I currently, if you click here on name, nothing happens, but what we can do is we can connect
‫both of them.
‫So if I visit Amazon and if I click on email, you can see here and I'm clicking on the label, but
‫I got my cursor here automatically.
‫Maybe here if I click on name, you can see the cursor is inside v name import.
‫So that means they both are connected somewhere.
‫And currently we are not connected.
‫If I click on them, nothing happens.
‫I'm selecting this text, but if I click on Amazon email, you can see it's getting selected.
‫You can see my password is selected, so I need to do something to connect both of them.
‫And that's where this order comes into picture.
‫So I just need to define this label as connected with whom.
‫So ahead, I can say, OK, this is connected to a name.
‫Mark, how does we know that this is name?
‫So we provide an I.D..
‫Now, this label is connected with this import.
‫Why?
‫Because we provided a unique identity to this import.
‫So this is I.D. and this is labeled part.
‫Now if I jump click on name, you can see now I'm able to point my car directly if I click here and
‫you can see that's happening.
‫So that's how you are binding, actually, and this is pretty important.
‫Now, this was just one example of it.
‫And what there are multiple example.
‫We can do a lot more things.
‫So if you see we can walk with text, we can work with radio box checkbox and there is some button and
‫few others.
‫But before doing that, let me tell you, it is a big, important part of success also because it helps
‫us to differentiate any element, any tag with the help of this unique name.
‫Now, head suppose I'm working with an email feed.
‫I can provide an I.D., which will be unique to that.
‫Maybe I'm working on multiple other fields.
‫I can provide different ideas for different elements.
‫And this is pretty important.
‫So if I need to provide any styling in future, I can just say its name and I can provide a different
‫color, different background on anything else.
‫So it'll help us to identify anything that is unique.
‫And now let us try to use label again.
‫And this time I'm going to use email and head.
‫I'm going to provide the text.
‫Space here, and then I'm going to provide input here.
‫And this time this will be immediately.
‫Now again, I'm providing ideas as e-mail.
‫Now, how do you even utilize any other name?
‫Maybe for now, you can use full name here.
‫And full name had.
‫So you don't get confused with this name, attribute anything else.
‫And similarly, you my views here instead of e-mail, you can use mail and mail.
‫But remember, this type is important because this is really fine with HDMI.
‫But here for an it can be of same name and you can give your own name.
‫No problem.
‫If I say that's one, get back here.
‫You can see now we have e-mail.
‫So that's how this is going to work.
‫Now you have collected names, you have collected e-mail and you've got time for us to add a summit
‫button.
‫So there are two options that you can utilize either use, but an option so you can directly use this
‫button and you can define it by a pen, which is going to be somewhat.
‫Hey, you can see these are the multiple options, and you can just see what and what you want to write
‫in this part, and I can say a guy as register on if I jump here, you can see a lot of illustration
‫button every time I click here it is going to go summit.
‫But remember, I have removed action option from here.
‫So this action option takes this data and some mix somewhere.
‫Maybe we need to submit to our different page.
‫Maybe we need to submit to some of them back in file, so we don't need to get into that for now, but
‫we need to discuss about this structure.
‫So that's a basic form that we just created.
‫Now, one problem that I see currently is they all are on a single line.
‫So for temporary purpose, let us introduce our new dog, which is known as break and we call it as
‫we are.
‫So if you use beyond, this is a dog that is going to bring a new line and I'm going to copy this after
‫a report and see this one get back here.
‫Now you can see these are on the front lines.
‫This is a temporary solution because when we work with CFS, we can add more styling.
‫Maybe I need some space between these two.
‫I can do that.
‫Maybe, but then I can do that.
‫But this is a temporary solution that we are going to utilize.
‫OK, this looks fine for now.
‫Now what else we can do?
‫I think we can use it for radio buttons.
‫We can use it for checkbox.
‫You can use it for dropdown menus.
‫But before that, let us also talk about controls that they have like.
‫These are pretty powerful.
‫We can add more attributes here and control things so any quickly.
‫For example, at this point of time, I don't have any restriction.
‫I can write any number of content that has any number of characters in this name.
‫Similarly, I can write anything right.
‫Well, we can add certain modifications are in restriction like minimum length, maximum length.
‫Also, if I try to submit this random gibberish content, this is going to give a pre-defined error
‫that you should have acted in your email.
‫So there are certain conditions which are predefined with these final form, and this is pretty good.
‫So we have basic validation that if someone is entering wrong content with that email field, they will
‫be notified.
‫Here, let me talk about minimum and maximum length.
‫So if you jump over there and could be.
‫You can define mainland, so you can define that, OK, our use, and if it's your username field,
‫you can define it should be eight character, five character, something like that.
‫And maxlength can be maybe 20 or maybe 10 for now.
‫And if I save this one and get back in and if I write a random user name, you can say I'm typing,
‫but I can not write anything out.
‫Or maybe some content like this.
‫So I cannot right after four, so that's how it is going to work.
‫Similarly, now we have restriction, maybe for one.
‫So if I ride one and then.
‫You can say what an error, because I required a minimum length of five.
‫And I currently have only one assailant, so maybe shoot, I'm sure I.
‫This is a notification pretty quick pop up.
‫So that's how we are going to utilize different parameters now.
‫In the next lecture, let us continue our form and discuss more about these radio buttons, dropdown
‫menu and few other things that we can utilize in our form.
‫I hope this lecture was helpful.
‫Thank you for calling.
‫And I ask you guys in the next one.