Today I'll talk about HTML forms. I will implement this mockup of an account registration page where perhaps you want to contract somebody else's business and you have to fill out this form to sign up and create an account. So first thing I'm going to do is create a directory in my file system for this project. So I'm going to use the terminal, but feel free to use the graphical user interface, your file explorer. I'm here in the terminal, I'm going to kdir to create a director or make directory space. Let me call it account-registration. And then I'm going to use my text editor, in this case Visual Studio Code, and open that directory. So a person just got here, we will implement this design here of a form to register an account, maybe you want to sign up for some business service. I pasted a link to the Zoom chat for the mockup, and what I just did was go to my terminal, use the command kdir to make a directory called account-registration. Now use Visual Studio Code, the code command, to open that. You can also do this using your graphical user interface. For example, here is where I was in the terminal, I can right click new folder or directory. I'm using Windows, so this is what it looks like. If it's on Mac, it's called Finder. In any case, this is the directory here, and let's go back. I'm going to go to my Visual Studio Code. So what it looks like, there's no files yet. I'm going to start off by creating a file called index.html. In Visual Studio Code, I can right click and choose new file. And here I can start typing the basic structure of HTML. Basically, we can do the doc type HTML like this. Just say we're using HTML5 and then HTML tag. Make sure to close it as well. Then we got the head, some metadata, maybe I want a title here. Let's see account-registration. This is the title that appears in the browser tab. Okay. And then outside the head, we write the body. And this is where we write the content for the form. Let's start off adding an h1, heading level one, that says account-registration, so that we see something. Now, there are different ways you can run this. There you can run development server, to serve this HTML file, or you can just open it in the browser. If you want, in Visual Studio Code, you can click to reveal file explorer, and it should open that window that I had. Where I have my file that I just created here, I can right click and choose open with it. Choose the browser of your choice. I have many browsers. I'll do Firefox developer addition. That's the one I'm using right now. And ever see this is the h1. Let me just share with you. All right, here's the... So every time I make a change to the code, I will have to refresh the page. Usually there's an icon here, or you press control R. Like I said, the benefit of using a development server is that it will auto reload everything as you change the code. So if you know how to do that, feel free to do so. In any case, just keep it simple and just use the browser and refresh whenever I make a change. Is everybody okay so far? Were you able to create your index file? Oh, good. This is a crucial step. So if you don't have the file... All right, so let's go to what we have to do. Let's start off. So we already got this heading. Now let's do the email. So for the email, it's going to be two things. First, we do the label, and then we do the input type text. Okay. Now, we're not using a lot of CSS here, but you can see the email label takes on its own line. If we do it in pure HTML, it probably will stick next to the input like this. So there are different ways. If you just want to use HTML, you can put the label in a div, and that should occupy the whole line. Otherwise, we've got to use CSS and change the label to be a display block. In any case, let me go back to Visual Studio Code under the body after the h1. If you can't see this well, let me know. I increased the font size. So first for the label, it's the label element. So open tag label, and then close the tag. And between the open and close, you're going to type email. Okay. And then finally, to make the text box in HTML, that's called the input element like this. And what's nice about input, it's that it's self closing. That means you don't have to put a closing tag like we did for label. So input just like this will appear with the text, as we'll see, I saved the file. I go to the browser, and I refresh and you can see there's email label followed by the input type text on the same line. Now let's go back. Like I said, a good practice whenever we have forms in HTML is to group each control in a div like this. You make a div. Div is a generic container, generic box. And we put the label and input inside. And this is the practice we usually do. Because we want to group every pair of label and input inside a div. And the way we reason we do that is we can easily style all of them. If we use the same class to this div. In any case, let's go back and focus on the input here. I want this input, I want to give an attribute to this. So I can specify what kind of input this is, because this element is kind of versatile, it can take on many forms, it could be a password, email, just generic tags, it could be a date, it could be a telephone even. So let's specify an attribute. So go to the tag, the open tag, add a space to the right of its name and type. And I want it to be text between the quotes. That way I want to be specific. This is just text. But like I said, this is for email. So it's probably better if you choose the email one. Even though they're kind of the same, they're just displayed text, but the email one has validation for the email, you know, email is usually whatever ads sign some domain. And it does it for you with a built in HTML validation. Okay, so another important thing you want to add when you do forms in HTML is you want to specify the name for this control, because this data, we got many different fields, right? Going back to the mockup. So we got email, we got password, and all these choices, tell us about yourself. When we gather all this data, what the user typed, all of that is going to be grouped together into something that we will call the request. So this request will be sent to the server. And then it needs to know what is what, right? Which one is the email, which one is the password, which one is the tell us about yourself. So you got to specify a name for each input. So going back to Visual Studio Code, we're going to add an attribute called name to this input. And we're going to give it a name. Obviously, we can call it email, but could be anything you want here. Okay, it's just so that the backhand whoever receives the form information will be able to distinguish between the different form inputs that were provided. In this case, you want to be very descriptive. And it's very simple as just email, even though it's like the same as the type of the this could be anything you type. Okay. All right, so let's make make the label occupy its own line instead of saying line as the input. For that, I'll just add some CSS to the div that groups this, I'm going to add a class I'm going to add a class. I'll call it form dash group. Now, because we're adding a class, we need to define a CSS. Now to do CSS, I must create a file here. I'll call it style.css. It could call it anything.css. Okay. Now in this file, I'm going to say dot because I want to target the element that has the class form dash group. This is the selector. Okay. And now we add the curly braces to define the style. Now this form group, I want the only the label that's directly child of this div, you see this label, I want to target that actually. So instead of just the form group here, I'm going to say greater than and then label. What I'm saying right now is if you see if you what's nice about Visual Studio Code is if I hover over this, it tells me what it means. So if you notice this part here, let me annotate here for you see if we can do that. Oh, I can't. Anyway, you see element class form group and there's a label there, because Visual Studio Code is telling us what is this rule mean? Well, it means there's a label directly as a child of an element whose class is form group. And that's exactly what I want to style. Okay, if you're unsure what this means, just hover over it if you're using Visual Studio Code, although any modern IDE will probably have the same kind of functionality. So I want the display to be block. And this is a CSS property that will change the behavior of the label so that instead of being inline, that is, it allows something to be next to it, it will be a block meaning it will push everything that's next to it to a new line. So once I save this style, I must link it to my HTML file. So going back to index dot HTML, I'm going to go locate my head tag, see the head and the closing of the head, I'm going to go to right before the closing of the head. And I'm going to add a link tag. So link like this. And then at the attribute we want to specify as well. And this is going to be what a style sheet. Now, let me do it like this, you can do it. See that. That's a nice thing for my Visual Studio Code, it can just type link and type press tab, and it auto completes for me. But in any case, the second attribute is where where's this style sheet href. And I'm going to say style dot CSS, because that's the same file name here that I wrote. Now this is a self closing tag, meaning I don't need a closing tag. So we can just open like that. Now that way I link this style sheet to this document. Let's check it out in the browser. If I go back and refresh, observe the email label there. Let me increase the font so you see it better. You see it went, it's now taking over just the whole line. If I right click that and click inspect, I can see the developer tools appear here. That's a very useful thing to debug. So I can highlight or click the label here. And you see, this is the style that's been applied on the right hand side. Now I'm using Firefox, but if you're using Chromium based, the tab that we'll show here is called elements. And on the right hand side, there'll be styles tab. Anyway, I can see the display block here. And if I uncheck this, you can see the before and after this property being applied. So before, like this, they're on the same line, you can see if I hover my mouse over the labeled it's in line, you see next to the input. Now if you want to find out, in my case, I'm Firefox, I can go to computed, and I can filter by display and click to see the browser style, you can see that the fault display is in line. That's why it behaves that way. So going back to the styles or rules, I can mark it again. So now it's display block. Okay, so this is a way you can debug things through the DAB tools. Okay, let's close it. And you can type your email here. And should be okay. Any questions so far? Okay, let's keep going. Going back to the mockup, let's work on the password one. So this is going to be very similar to the email. So you can even try to get ahead of me, try it yourself. So it's basically the same pattern, we have a label, and we have another label. And we have an input. In this case, we're going to make some special type there to be password so that the characters disappear, or become just those stars. Okay, let's go back to Visual Studio Code. So we're going to follow the same pattern. If you want to get ahead, you can add the div, but just start small. Okay, first we need a label. So add a label, close the tag, and then between them, password. That's the label. Great. Now let's do the input. Okay, this time it's input type password. Remember, input is a very versatile element. It can take on many forms if you change the attribute type. In this case, having it being a password type will hide the characters. And finally, let's add names to distinguish this when we submit the form. Let's call it just password. Finally, let's group everything together in a div so that it can get the style that we define under the group, form group, class, so that we control, we can see every single grouping will have the same kind of div with the class form group. And the reason that is great is because if I want to change the style for each of them, I can just change it in one place. And that one place is under the form group class name. So in this case, when I add the div here, this input for the password will also add here to the style of having display block. So when we see it in Visual, in the browser, and refresh, it will also occupy its own line and push everything to the new line because it's a form group. It's under the form group. So you see the form group greater than label there as well. So that's very convenient. Only one place to control them all, instead of defining different classes or IDs for each one of them. Okay, this looks nice. Our mock-up has some spacing between the controls groups that it's up to you to add them. If we were to add them with CSS, we can just add a margin to the bottom of every group. That's one option. Remember, I don't want to target things individually. I want to always and try to do something there. So to me, it looks like each box that has the class form group, we should add some space to the bottom so that the next one will not be as close. So if you want to use the DevTools to just have a feel of what it looks like visually, click the first one, for example, and you can see it's highlighting in the content there. That's the box. So I'm going to go see this element thing, I'm going to click there, and I'm going to say margin-bottom. Now, this is the property that adds some margin or space to the bottom of this element. Let's start off one pixel, and I'm going to press the up key in my keyboard, and you can see the space after it's increasing, right? If I hover over that, you see the yellow area is increasing, the more margin-bottom I get. So you can tweak, press down arrow if you want less. Let's try how about 16 seems okay. How about 12? Just choose the number that you think is right for you. I think it's nice to have 12, so I'm going to copy this after highlighting it, and I'm going back to Visual Studio Code, my text editor, and I'm going to go to style.css, and here I'm going to add a selector for dot form group class, and I'm going to make the margin-bottom 12 pixels for every element that has the form group class. If you don't know what this selector means, again, hover over it in Visual Studio Code, and you can see it's saying, okay, this means an element whose class is form group. This is what it is targeting or selecting. In any case, save that going back to the browser and refresh, and you can see there's a permanent space between each one of them, and if you right light, click this pointer here in the DAV tools open on the left. You can highlight anything on the page. I want to highlight this second one here, see if it can do it. Yeah, if I hover like outside here. See that box has some margin-bottom as well, so every one of them will have the margin-bottom, so you don't have to do it individually, right? It's already done as long as you add a DAV with the class form group to the next set of inputs, it will always have the space. Okay, let's try to add a password. There you go, it's hidden. Going back to the mockup, there's a slight space between the label and the input, so we can tweak that as well, and you see it's right here in the label, so we're going to target the label. We already have the selector here, so all we have to do is go here and see what happens if I add maybe margin-bottom again, maybe a little smaller, four, how about that, add a slight space there, see it before, after, before, after, see controls all of them, so we're going to take this highlight and control C. Now the reason I always do that is because the DAV tools is not something permanent. If you refresh this, we're going to lose that code, so we always got to go back to our source code and add it there. Now we're targeting the label directly under the element with class form group, so we're going to add it here. Okay, so that takes care of the space, but is that any question so far? Okay, let's keep going. Back to the mockup, we did the email password, let's do this one. Now this one is a little bit different because as you notice the email and password, it's one liner, right? Only one line of text. This one has multiple, you see one, two, three, four, so this is a multi-line text input field. Now in HTML, this is not input, this is called text area, so be careful with that. All right, text area is the element you want to use here. With that said, let's go to the code, so tell us about yourself, Lorentz or whatever, okay. Going back to index.html. We can just add the div again, form group, every time we make a form group, add a div with class, and then let's do it. Label, this is tell us about yourself, and then not input, multi-line text is text area, text area element. Now this one is not self-closing, so you got to close it, okay. Don't forget the closing tag, like that. Now make sure to add a name because we want to identify this. So let's call it, I don't know, biography. Save that. Going back to the browser, and refreshing, this is what it looks like, and we can type two lines, and then three and four. You can see there's a scrolling bar, if you use your scrolling, button your mouse, you can see this thing can expand, if I click and hold. In any case, the default is like this, but we can change it. If we click to inspect, I can actually change the attributes in real time, if I right click this, edit as HTML, and I want to show you that to increase the number of rows by default, I can say the rows attribute, let's say five, like this, and it expands vertically, okay. So you can use that attribute to specify, we can do one, two, three, four, five rows shown initially. So let's use that. Remember, I did this, but I got a copy that back into my source code. So here I'm going to add the rows equals five to the text area. Now let's make everything add here to, see the, this width is kind of off, you can see, you can see the vertical line in relative to the inputs previously, it's not on the same, right? So this would be more like here, if we want to follow the same line, right? So we can adjust that by changing, either make one ways we can make every input in the form groups, take 100% of the width of the parent, but then we control that by specifying a container for the whole thing. All right. And that's what we're going to do. Actually, I didn't tell you, but when you have a form in HTML, we have to enclose every single control in a bigger box that has the element form. So let's do that. So all of the form elements here, back to Visual Studio Code, we must place them under the form tag, open the form tag, put all your controls inside. I always like to add indentation that is spaces to the left. So that visually, I can see these are after the open form tag. And when I finish that, I put the clothing form here, and then the next one, the indentation would go back to the same level here. Instead of being here, it's there. In any case, now that we got everything in a form tag, this form tag has some attributes we can add to specify where the information is going to go. Now there's two important ones. The first is the method. And this has to do with the way the information goes to a server. It goes through what's called the HTTP request, hypertext, let me write it for you, HTTP, hypertext transfer protocol. That's how the information gets sent. So it's either get or post usually. Now if you put get for the form, it's not a good practice because the things will appear in the URL. I can demonstrate to you in a bit. So usually we want to do post. Okay, let me leave it get just so I can demonstrate that. And then we need an action attribute to say, okay, where is this going to go? Now I have like an example place where this is going to go. But actually, this is not going to do anything. Okay, this URL here is just like a placeholder test server. But it doesn't do anything at all. Okay, in the real world, it would take the information, do something and give you a proper response. I paste that to the zoom chat. It's just so we can have something. Just someplace or a typical.com is called Watson API that returns JSON, but we can also use it to test this, even though it's not going to find this endpoint doesn't exist. It's just so we can see it working. In any case, I'm going to save this. I'm going to go to the browser. And I wish fresh. Now you can see the form is here. Now watch this. I'm going to click the network tab in the DevTools. Oh, I need I need submit button, actually, I cannot do it yet. We need the submit button. We'll go go to the mockup scroll down. You can see here, this button create account. So I need that to trigger the sending of the form. So let's add that quickly. So I can demonstrate the submission. So right before the closing tag for form, I will add an input type button. Oops, actually, it's type submit. It's a special one. Okay, because when it's inside a form, this will be the button that will be used to trigger the submission of the form. So be careful, input type submit. Now if you want to label for the input, add the value, create account. Now this is a self closing tag. So let's finally leave it like that. Now there are alternatives to this. You're going to see also button type submit like this with the create account between the open and closed tag. You can also use that as well. Okay. But I'll just use inputs like this. In any case, going back to the browser, refresh. Now I can see the button here submit button. Let's see what happens when I click create account. But before that, let me type something for email. Hello, mail.com and some password. I'm me. Watch the network tab and make sure the filter is all instead of anything else. You can see this, this shows us what requests were made when I click submit. So I can click the first one. And this is showing me what happened here. So it's a get method to that place, right? jsonplaceholder.typical.com slash test slash html-forms. You can see what happened when I used the get. It adds the information to the URL. You see to the request URL here, you see question mark, then the name of the field email, this comes from the name attribute, okay, of the input. And then equal sign the value. Hello, mail.com. That's what I wrote. And ampersand to say and password, that's the password field equals the value I typed, I type password. And ampersand biography equals I'm me. That's what I typed in the text area. Okay. You can get quick request. There's nothing here but going back to headers. So this is not good, okay, to use get. The reason we don't use get is because of this, like I just showed, the, going back here and do it again. The information that we typed, it's going to the URL and in the server side, there's usually a logger that's always printing stuff and recording the requests. Okay. Think of it as a person or recording everything that's receiving. So it's going to record that and imagine you're sending the password. That should be something sensitive. And the record is recording that in its log file, in its history. If anybody goes there, they're going to see it all people's passwords. So you don't want to do that. That's why we don't use get. We use post. Okay. So remember that. So you want to change the method here for the form to be post when it's post all the information does not go to the URL in the URL goes to the body of the request. Okay. And that's important because the body will not be logged by the server. Okay. Enough of that. Going back to the browser after doing post. I'm going to try it again, click the browser back button, click create account. And now I want to expect this. Oh, actually, I forgot to refresh. Let me see. Let me make sure I saved it and refresh test. Okay. Now it's doing post. Nice. If I click this, I can click request. You see when it does post, I click request here. I click raw. It sends it in the body of the request payload. And you can see the format is like this, always the name of the field equal sign and its value. Hello, percent 40 male.com. Now, reason you see percent 40 is because the at sign gets encoded. Encoded meaning the characters change to another kind of symbol so that it can be sent because it's the at sign is kind of a special thing. So they usually encode all these kind of characters. And if you have more than one field, it's at is the ampersand and the name of the field equals password. And it's always like this format. Okay. And if you notice the space here has a plus, I said I'm space me that got converted into a plus. Okay. So if I uncheck raw, this is what it looks like. In any case, that's the post request. Now let's go back to building the form. You want to click back here, click close. Now the next thing, oh yeah, I was going to talk about the style, right, but to make everything line up. So since we got the form tag here, I can actually do something about that. Maybe I can enforce a specific width for the form and everything will adjust accordingly. Let me show you what I mean. If I right click this input here and inspect, if I make its width 100%, it will take the whole line, right, the container, you see it's taking over that. Now I can control that if I go to the parent container that contains everything, that means the form here, see the form, I can actually adjust what if the form with is maybe 300 pixels, you see what happened, it adjusted, it shrunk. So this is what I'm going to do. So I'm going to take that and control it with the parent form here, I can control whatever is inside. So I'm going to make all of these form controls with 100% and then control it with the outer container, that's the form. Now you might have noticed this thing, it's kind of going inside a box, it's probably due to some CSS property there. But in any case, let's go back to CSS style of CSS. So I'm going to take this dot form group, immediate input, make the width 100% like that. And there's also text area. So you also want to do dot form group, text area with 100%. Okay, notice I tapped the same thing twice. So if you find yourself doing that, you could actually reuse this block by just doing comma here, like that. And then you don't repeat yourself. Now I need to target the form. So going back to index.html, I can add a class or ID, it doesn't matter. Let's say it's a class registration dash form. Let's do account dash registration form. Save that, go back to styles. Let's add dot account registration. Oops, is a typo. And make the width whatever we want. Maybe you want it to be 300. Notice I put it before everything doesn't matter where I put it. Okay. I can put it here. I can put it here. It doesn't matter. Okay. Save that. Let's go to the browser. I'm going to refresh. See what happened. Now everything is nicely aligned vertically the same way. That's the form. Nice. And let me see one thing here. I'm guessing trying to see if that's the problem. Just trying to see this funny thing. I think it's because of the input having some, if you look at computers here, layout, you can see there's some padding to the left and right, right? Is if you remove that, let's see what happens padding zero. I'm just playing around to see why it's doing that thing. Yeah. Seems to have been better a little bit. Then some border. Oh, I see. See if border is zero. Don't do this. Okay. I'm just trying to see why it's not lining up. Okay. Yeah. Let me refresh. So the reason this form, you can see the box that kind of going outside the box that that's due to the border and the padding for the inputs. And I think you can change that if I'm mistaken. If I do border, what is the content size? Let me check here. Border box, CSS, the property. Yeah. Box sizing. Let me try that. Box sizing. Something like that. That'll be for box sizing. Yeah, that's it. That's why it's doing that. See if I do box sizing border box, they adhere to the thing. And this has to do with when you look at widths, what is included in the width? You know, is border padding included in the width? If I change the width, does that include that? It has to do that. If you want to read more about it, look at box sizing property, CSS. Okay. But if you want to fix this issue where it's going out, just use this. We can go and go back to the Visual Studio Code. I think we did for text area. Here can add that box sizing border box. Okay. So we're going back to refresh and click the form. Now it's nicely within the box. Okay. Let's close the tools. Any questions so far? Oh, good. Let's try to speed it up because we're running out of time. So let's do which option best describes you. It's like a question. And then there's like a radio. This means only one of them can be chosen. Okay. So let's look at that. Go index before Apto tells about yourself. Let's see here. Which option best describes you? Which option best describes you? Now this one, technically, it could be a label. I don't want to make it a label because the label is usually associated with a control and an individual one. And this one has three separate options. So let me make just that a div. Yeah, I didn't talk about associated label of the input yet. But let's first do this. And then we're going to input five radio. And then individual like this. Let's look at the browser. So it looks like that. You can see the checkbox, not checkbox, sorry, radio box was checked. So we repeat the same pattern for the other ones, business and other. Okay. So let's do it. So we're going to do input five radio, business, and then repeat the same thing for other. Now you notice there's no line break there. You notice you notice refresh. They're all in one line. See if I click and they're all clicking the same thing. So we're going to fix that soon, but we got to fix some bugs. So the first thing I want to do if I refresh, oops, it's still marking them. Let me open a new tab. If I click the word business, I want it to be checking this. If I click the word business, I want to check the radio to be selected. Let's fix that. To do that, we need to enclose the whole thing in a label. Okay, so I do like this label and then at the end of label. So I put the input radio with the business thing inside the label. Okay. And then refresh and you click the business word and voila. Now it checks. Okay, so that's the trick here. Going back, just place a label, open the label here, then put the input and the individual and then close it. Open the label, type the input and the order choice and then close the label. Okay. And that should fix that. Now another thing we want to do here, let's see, you can also put a div last form group. That's fine. And if you do that, remember the labels will have some light space under them because of margin bottom and they will be displayed block, right? Remember that? Going back to the browser, you see that? What happened? So let's inspect each one because each of them is a label directly on the form group. They will get the style with display block, which makes them occupy the whole line and push the other one down. And then the margin bottom, which is a space slightly below it. So it looks a lot nicer than before. And you can see the form group is kind of like a central place to style everything, right? As long as we add the class form group inside outer div, everything gets styled nicely. So that's our very good benefit. Change it in only one place and everything else gets styled. Okay. Nice. Now this thing about clicking is messed up. And that's because I need to make them associate with the same thing. So let's go and fix that. So this is like which option batch describes you. I don't know what to say. What can we call this? Land? I don't know. Let's call it plan. Name is hard. Okay, go to the input, radio add a name. Let's say plan. And then you do the same for the others. And add the same name. Plan. Okay. So add a name attribute to each input with the word plan. Plan. Going back. Refresh. Now if I click, you see what happening? Only one of them gets selected now. And that's because the radio is a user interface piece that you can only choose one option. When we have the same name attribute value for all of them, they will associate together. Meaning if I choose another one, it will uncheck this one and only check the other one. Okay. That's the radio. Okay. Now let's look at the other one. There's a lot of space here. If you want to touch the CSS up too, now we're running out of time. So I want to move fast. Now let's do the checkbox. Now the checkbox is different. You see the checkbox? We can check more than one. You can check one here, one here. Okay. It's multiple choice. So it's almost the same pattern except the type is going to be checkbox. Let's go and do that. How do you use this or service? How do you use our service? Let's do it. Okay. Let's add a div class form group. How do you use our service? And then let's start just input. Okay. Input type checkbox. Add a name here. Let's call it usage. Now this is going to be with a checkbox and then I have to type the whatever next to it. Let me see what it was. It was desktop app, mobile app, smart TV app. So desktop app. And then you put a label surrounding it so that the word desktop app, it will also check it. Now you want to repeat this pattern twice, right? One. So I'm using my control shift. Let me see alt. Yeah, alt shift down in my visual studio code. I use windows that duplicates the line and I duplicate it two times. So I don't have to type it again to move fast. And then I change it to big mobile app. And the last one is smart TV app. Now one thing I didn't mention is, okay, how does it know what choice I'm picking? So I didn't, I didn't mention that. So we need to specify what's called a value attribute. Because when I submit this, I don't know exactly what which one I picked. So you want to make sure to add a value attribute to give it a unique identifier. So this one you can have maybe desktop. And then the second one will be mobile. And then last one, you can just say TV. Save that. Now let's see what happens in the browser. I want to go here and refresh. You see this here? Let me check one, check the other, see this multiple, you can check more than one. Now let me submit this form and see how this looks like in that format, submission format. Because I think there's a bug with the radio because I just mentioned the value attribute, right, for the input. So we got to fix that. Let me check the network tab, click, create account with the all. Go to this one. Let's verify the request here. I want to make it raw. Email is fine, password. And then oh, the password didn't type anything, right? That's why it's empty. Biography. So I'm looking at the usage, right? You can see here, it says usage equals mobile and ampersand usage equals TV. So it does this, it adds, if you select multiple, it adds each one of them like this. And you can see there's multiple, same name here. I don't know if it's too small for you, let's increase that. So that's fine, okay? That's how it appears. But the plan, it's a bit weird. Let me go back and select business for the plan. Then submit. Because I think there's a bug there. You see the plan is always on. That's wrong, right? Submitted business. So that's why we've got to specify the value. Otherwise, this thing will be bug. That is has a problem. Going back to Visual Studio Code. For all these radios, you want to specify a unique value here, attribute. This one, let's say individual, like this. And the other one is business. Notice that this label that I typed next to it, it doesn't matter. It's not going to show up in the submission. So you have to type the value here. Okay, so don't forget. Going back to the browser. Going back. But land is supposed to be off when inspected. Which one? What do you mean? See that? That. Now let's try selecting business again. Click the network tab, create account. I want to verify in the request raw that, oh, now it's plan business. See this one? Plan equals business. So now it's correct. Going back, individual, select create account, verify the request raw. You see now it's individual plan. Okay, now if you don't like this raw, you can obviously do live format. And the live format is much nicer to see. And you can see there, the plan is individual, right? And you can see the usage is multiple ones because it's an array. So you're going to see mobile and TV. So going back, if I pick other and then desktop and smart TV and click create account, let's verify that the request is correct. We got plan other, that's correct. And got usage, desktop and TV in a list because it's multiple things. You see that's correct. So all this is going to be submitted to a server and they will know right away what each of these things mean because there's a label here, right? A property name, email. Oh, that's the email. Oh, password, that's the password. This is the plan. Oh, this is the list of usage options that were picked. Okay, it's very important we verify that the request is being sent properly. And that's only going to happen when we have the right HTML attributes correctly set. What's important that we have a name for every input control, right, be it input text area or whatever, have a name. And then have in the case of either radio or checkbox, you have to have a value. For each of the choices. Otherwise, the server doesn't know what you pick. So make sure to add a value there. And because they're all associated together as a group, right, you have to make them have the same name. Otherwise, they will be considered in different groups. So you've got weird things like the behavior we saw, where the radio we could be, all of them could be selected out once. But that's not true. We can only select one of them. But make sure they have the same name. So that behavior to happen. Okay. Any questions so far? Okay, I'm going to move really fast, because I don't want to drag this more. So how many user sheets will need this just an input type number, very simple. How many users seats will you need? Let's go here. How many users seats will you need? We can make that a label. And we can have an input here, type number, okay, not tax type, it could be tax, but numbers better. This is just 12345. So one make a div form group, class, enclose the label and input. And that's it. Now one thing I did talk about is associated the label with the input. Let's talk about that in a moment. So see how many users each way we need, I can type a number here, increase with the up arrow, down arrow, decrease. Firefox might behave a little bit different from Chrome, but it's pretty much the same. I think in Firefox, I could type a letter and which doesn't make sense. But in Chrome, it doesn't allow you to type a letter. In any case, one thing I want to point out is we see when I click that it focuses, right, see the outline. This is called a focus so we can type. Now if I click this label, see I'm clicking it, nothing happens. It just highlights it. I want this to click that and focus this. Now to do that, we have to associate the label with the input. It's very easy. Okay, see the input here, give it an ID. Let's say account registration form dash, use users seats. How about that? You can give anything you want, just make it unique. Okay, so I'm going to copy that. Now for the label, we're going to say four and then paste that ID. Okay, take the ID of the input and make it the value of the four attribute of the label. That way this label will be associated with this input. Now let's check it out. Refresh. I'm going to click this label. See what happened? It focused my input. Let me click outside and try again. Click the label. Now I focus this so I can type. Okay, that's a nice thing. You can do that for email, password and the text area here. Just make the same pattern. Give the input an ID and then make that ID the value of the four attribute of the label. If I do that quickly, just so you know, going back here. Okay, input for the email. Let's get it count registration form dash email. And then label for count registration form dash email, like that. Then repeat for password, right? Same thing. Give it an ID. Let's type it password. And then go to the label for same thing. Do the same for text area ID. Let's call this what is it biography. And then label for count registration form biography. Okay. I know I went a little bit too fast, but you got the point. Going back to the browser to test it out. Oops. Refresh, click email, focused. Click password, focused. Click tell us about yourself, focused. Okay, that's nice feature to have. Let's go back here. Oh, we got a date now. When should the service start? Let's do that. So that's going to be input type date. After the seats, make a deal class form group. Label for we can do account registration form. Let's call it what is it start date. Start. Let's call it just start dash date. When should the servers start? So I put a label here when should the server start I put the four already here because I'm going to give an ID for the input so I input run get the ID, which is the same as the four. So that thing is we just did is implemented. Now this is going to be input type date. So it becomes a date figure. And you want to give it a name, right? Let's give it start dash date. Let's check it out. Refresh, you can see now when should the service start date, click there, focus, you can either type right to what's the date today. Or you can click this calendar and pick. All right, and pick here month. Click there again. It'll probably look different on Chrome. Okay, buddy, you get the point, right? You can click here and it will change there. So that's the type date. And then going back to the mockup. Finally, let's do this to checkboxes. That's pretty much a checkbox here. Okay. I have read and agree to the terms ever I agree to submit registration electronically. Let's do that. So do it. So we have input type checkbox. And then we got I have read and agree to the terms of service to the terms of service. And then you add a label surrounding everything. Oops, forgot the L. Label. And then do the other one the same way. I can just do it like that. Duplicate with shift alt down arrow. And this will say I agree to submit my registration. I agree to submit my registration electronically. Thank you. Yeah, I think that's give it a name, right? Let's make sure to give her a name. Let's call it that. I have read terms. Agree to terms. How about that? And then the other one is agreed to submit my resignation registration. Name is agree to electronic about that. All right. So in this case, let me say you can either group them together. That's fine with the same name, or it can have different names. I think that should be fine too. Let's check it out. Oh, yeah. And the value is either, let's see, name and then some value. Let's see what happens. Oh, yeah. Because this one will be on, like I will, I remember what you're saying about on. Okay, okay. Let's let's let's check it out. This one a little bit. Oh, let's add the form group to going back here because it's all messed up in the CSS. So let's add a div class form group. Oops, there we go. Form group added there. Okay, now it's one line. Now let me mark one of them and see what happens in the dev tools. Okay, I mark the first one only. And I'm going to verify the request. Yeah, agreed to terms is on. And the other one doesn't even show up. Okay, so that seems what happened when you don't have the value, it will just use the name agree to terms and check if it's checked it's on. And if you don't have a check, it would just not appear at all. Okay, so that that that seems okay in this case. All right, so yeah. But check the other one if appears on. And if I don't check, this doesn't appear at all. And I think that's it. Well, the thing if you want to make this button matter, at a width, 100%, that would be maybe nicer. And add some styling CSS. That'll be nice. Let's see, if I go just to finish it off. CSS.form dash group. So we had an input, right? Directly input. Oh, yeah, if you want to target input type some man, I think you can do it like this. Let me try. No, that doesn't seem. Let me see. CSS. Select or attribute. Thought he could do that. Form group directly input type submit, that's what we got right type submit. With 100%. Oh, is it because the quotes? Double quotes instead. No. In any case, I thought that could work. No, it's not working. Inputs submit directly under the form. Oh, because of the form, I'm sorry, not the form group. The input is not inside the form group, right? That's why it's not working. This input is not inside a form group. Since I the form, that's what I meant this form element. So put a form element there. That way is now. Okay, now it's working. Let's go. Here it is. To inspect that. Now it's appearing here. There go. Now it's the button is 100% with and I think that's it. That's the end.