HTML Forms Tutorial Summary

Okay, now we're back and we're going to learn how to build forms because that's an essential part of HTML. You might have seen stuff where people build forms. So we're going to have the help here, Troy, I guess, that's username, in the live share. So we have a live share going on here. You can download the live share extension. So let's go to signup.html, and by the way, if you're using live share there, let me close this. Oops, hold on, don't start yet, don't start yet. So let me save the file. A bit, okay, buy two files or don't save. Okay, hold on, let me just have one open, otherwise. So you can click this icon here to follow participant, and that way you follow the person there. And okay. So let's build a form. So usually the form to build it is, you have to have a container called the form element. So yeah, what is to write the form element there? So angle brackets form, yeah, cool. Yeah, let me open on the side, the signup. I don't think you can see the live review necessary, right? Oops, I should remove this, and put the doc type there, sorry, HTML. Okay, cool. So now, remember, when we do forms, fill out forms, there's text areas, text inputs, there's radio buttons where you select only one of the choices available, there's check boxes, there's date selector, so on. Let's start with simple signup form, as somebody's signing up on a new account for the website. So we can start off, how do we, would somebody write an email? So the tag here would be the input tags, if you put an input tag, open tag, input, yeah, you could just close it there. So if you do that, you see on the live review, that we can type something here as text. But this tag is also self-closing in the sense that you don't have to put a closing tag. But it's a very powerful tag in Versatile because it can have many forms, and the first form we want to do is the one for email. Actually if you do just normal text, you can add an attribute here type type, and the default is text, sorry, I'm typing, and yeah, so this is the most generic one, but if you want to be able to validate email patterns, you would change this type to actually email, so you want to change it to email, yeah, so basically it's basically the same thing except if you were to submit the form, it would validate this as an email, so if you type something wrong like doesn't have an ad sign, it would complain, hey, this is not an email. So that's the difference with the text. Obviously if you look at it right now, the user, if a user comes in to this page, they don't know what the heck is going on because it's just a text box, okay, what do I type here? So we got to add a label, so before the input, we have to add a label, so there's an element called label, so it's just like a paragraph except you can use label and it typed a text between the tags. Yeah, so you can type it before the input line 10, yeah, close it and then email, yeah, cool. So that way the user now knows, oh, okay, I have to type the email, nice, okay, great. So usually when we have a label and an input, we group them together to make it better organized and the way I do it is with a generic element, container element that's called a div. So you might see there's a lot of divs enclosing the label and input, so it's better organized. So the next one would be another div, let's say the password, right, you got to type the password, how would you do it? First you have the label that says password and then you got the input for the password. The VS code made you the two quotes, yeah, yeah, so you already know it, there's a different type, password, cool, let's add the label password in, yeah, cool, nice, yeah, as you see the user will understand that, okay, I got to type the password. Now what's the difference between type, password, email, so on? Well type passwords, basically the characters are kind of bullet points or hidden, so that's the difference. So if you were to be text, you would see my password and we don't want that, so we just make a password. And yeah, so this input tag is very versatile, we can adapt to email, password, we can even do URLs and as we'll see later it can be used for date and so on, okay, great. So what else, yeah, I want to point out why did we add the divs, another reason, look, if I don't have the div, I remove it, everything will be in one line, so it kind of sucks, if I want one per line, the div makes sure that pushes anybody else to the side down to the next line, because as we'll see later, the div element by default at CSS display property is block, okay, that's why it does that. Alright, that's cool. Now what else, what other kind of information would we do? What about the data bar for the person? I know it's probably not what we asked, but just for the sake of practice, how would you show like a date picker? So you put a label here, let's say data bar, label, and then it would use inputs, but the type here would be try using date there, yeah, yeah, yeah. See what, let's watch what happens there, did you see the input change form? Now it's a date picker, if I click the calendar, oh wow, I can pick the date, or I could type it myself here, very powerful. So input component or element can take on many forms. Nice. Yeah, so you can go on and try different things, or what else haven't we tried? So we got data bar, anybody have any suggestions for what to add to the form? So registration form, yeah, text area, how about text area, okay, let's add a div. And let's ask for the person for that biography or bio, what element would you use intuitively? An input, but actually it's not an input. So we don't have multi-line text, what we use, what's called text area, yeah. So the element name is text area. So the angle brackets, text area, yeah, and you need a closing tag, yeah, exactly. And usually we don't say anything between unless you want to show some value there, but I don't want to, so yeah, nice. So we got the text area, which is basically a multi-line text, so one, two, and you can expand here like this. There's a rows attribute you can change here, if you want to change the default behavior. So for example, five rows by default, one, two, three, four, five, yeah, so that's the default display, okay, cool. Let's see, what else can we do? So you probably have seen these multiple choice questions about I can only select one, yeah, radios. What could you do for radios here? Let me show a div. So what would you ask about choices that a person would make and suggestions? Oh, not select, not selected. Now I'm just asking you, would you add to the form, if you have like a radio button, always like the circle, let me show you here, like this, input type radio, like that, you see there's a circle there, if I duplicate three times, it's like I can select like that. So usually we add something, choice one, choice two, web language, okay, let's do that one. Say your favorite programming language, how about that? Obviously there's so many, but I'll just add, I don't know, for the sake of our course, let me just do this, okay, so you can select HTML, CSS, JavaScript, let me, so you can see there, let me put this in a div here, so it pushes the thing to a new line, or you can put a paragraph or whatever, okay, for the sake of example, you can only pick one HTML, CSS and JavaScript from the choices. But if you look right now, I can pick multiple, that's because they're not grouped together, and to group them together, what you do is add an attribute, name, and let's call it favorite language, and all of them have to have the same name attributes, I'm going to copy here and there, that way they're grouped together, so when I pick, only one of them is picked, okay, so this is the name attribute, and in fact, if you were to submit the form, all the inputs should have a name, otherwise the server who is listening, when you submit the form, the information goes somewhere, and that's somewhere as the backend server, they have to understand what you're sending, so if you just send the inputs without any kind of identifier, or name, they wouldn't know what you're sending, so let's go here, start from line 12, I wanted to add a name attribute to this input, and just call it data email, so that the server, when they receive this information, they will see email, and the value that was typed, yeah, yeah, yeah, and then we do the same for password, and so on, yeah, cool, and then for the date, give it a descriptive name, I don't know what you're going to call that, how would you call data birth, okay, using camel case, that's fine, great, I see you already know about camel case, which is this naming convention of the words are together by the first letter of every second word is capitalized, like off birth, but the first one is not, cool, and then biography packs area, you need a name there, make sure when you're writing HTML forms that every single thing that the user can type or input information has to have a name attribute, so the backend server knows what piece of information is what, I just call it biography, biography is good, yeah, all right, cool, just add an h there, oops, sorry, thank you so much, yeah, if anybody have any questions, let me know, um, what else, yeah, you were, I see you were typing before select, even though, I didn't intend to, what would we do for the select, it's kind of like the radio, but it's just a different way, right, it's like a drop down, anybody haven't suggested what we would use for the select, now that let's add another one, and I don't know, let's call it whatever we're going to call it, so we had a favorite programming language, okay, favorite color, there's so many, but okay, favorite color, let's just add three, okay, because there's too many, let's say there's a select drop down for three colors, so I see you already know select, so the name of the element select, it's kind of like the list, we have a container select element, and then we have the option elements, hmm, yeah, mm-hmm, yeah, you have select, and then inside, we have the option, it's just like list item, mm-hmm, cool, yeah, I just have three of them, mm-hmm, yeah, you can type any color you want there, cool, thank you, yeah, as you can see, if you allow me to explain, on the right hand side in the live preview, it's basically a drop down, or this is called a select, you can click and there's choices, and you can pick from one of them, basically it's like a different version of what we did for the radio, whereas the radio we have, you can see all of them, and you can click to fill it in, these select is like selecting here, okay, so a different way of selecting an option, so like all the other dumps, let's add some more attributes here, for the select, let me type here, we would add a name, and maybe say list is like favorite color, that way the server knows what you're talking about, usually we want to do, for every option we have labels, but every option should have a value attribute, so the server internally would keep that value, for example, red, and then blue, it could be an ID, like one, two, three, as well, that's something internal that you don't necessarily need to understand, but that's how it's keeping track or stored in the server, and for the purposes of the user facing, you would only change the label here between the tags, because that's what the user see, they don't actually see the value here, that's only for the back end, that will see that, it could be red, it could be one, blue could be two, green for three as well, depends on how you built the system, okay, but if you want to keep it simple, just put the words, so you know what it is. Okay, we got that, let me allow you to add a button here, so if you want to, let's try to submit this, so if you want to submit the form, you need a button that submits that, so there's two ways, you can add a button element, or you can add an input, so if you go, let me type it here, okay, if you do the input way, remember input can take on many forms, you can change the input type to submit, and it will look like that, it will show submit, if you want to change the label, add the value different here, for example, register, that's one way, okay, of submitting it, now another way, let me comment this, by the way, when I comment something, it means I mark this piece of code as something to be ignored by the computer, in HTML to make a comment, you add the less than exclamation dash dash, to start the comment, and then to finish is dash dash greater than, that way this is actually omitted from the actual output there that you see, to the hot key that I use is control slash in VS code, to comment, uncomment, okay, so that's one way, now another way is with the button, you might see that a lot as well, if I do button type submit, make sure it's type submit, because that way you associate this button as the whole submission button for the whole form, and this one has a closing tag, so you put whatever label inside, like register, see, so two different ways of making a submit button, okay, so now how do we submit, well, traditionally you would go to the form, if you go to line nine, you have to add two attributes, the first is the method, and the second is the action, so basically when we submit forms, what it does is makes what's called an HTTP request, that's how we communicate hypertext transfer protocol, okay, that's the protocol that's used to establish the communication and send messages elsewhere, so you have to give it a method, which is basically if you've ever seen get, post, and other stuff, that's the method, when you go in the browser and you type anything in the address bar and press enter, that's actually making a get request, okay, get to some server, hey, I want to get something, okay, but when we submit forms, we want to use what's called a post request, and the reason is if you do get, all the information will be included in the URL, and that could be logged, so your password could be seen in the log files for the server, okay, I can demonstrate that in a bit, but let me just, by default, it's post, okay, but I'll demonstrate, get to see what's happening, but don't use get for forms, the action is a place where you want to submit this to, since we don't have a backend server, I will give you a fake one, this one here, and that's the action there, okay, that's the fake one, now to demonstrate that, allow me to go to a different browser here, because this one is going to be act weird, so for now, I'm just going to go and share my screen on the browser, and I'm going to go here to sign up, and I'm going to open the DAB tools, and you want to go to the network tab, and make sure the filter is all, otherwise you might hide it, and we're going to submit the form right now, I'm just going to type something here, some random information, and click register, now you see what happened when I type an email, that's not valid, this is why we use input type email, so it validates, so I need an ad sign, mail.com, let's say, and okay, now if you notice the request here, this is how you analyze the HP request, you click here, and you see the request method was get, and then the URL, what's this, but look at the URL, this is the action, okay, if you didn't notice, follow by a question mark, and pairs of property name equals sign value, and they're together with an ampersand, so user equals something, percent 40, mail.com, by the way, the percent 40 is just a codified version of the ad sign, okay, encoded, and then a percent to add another one, password equals something, you see my password is here in the URL, so that's the problem here, we don't want to show all this information, when the server receives this, they will log the URL, okay, so we don't want to prevent that, move all the information to the body of the request, now to do that, we go here and change the method to post, so if you go back here, line nine, I change that to post, okay, so whenever you do forms, methods should be post, okay, method post, now let's save that and try it again in the browser, if I refresh, I'll go back here, refresh, because I changed the code, let me crash everything so it's clear, click this icon, something in mail.com, test, type something there, hello, it's me, CSS, and red, I'm sure blue, register, now you can see, now it's no longer in the URL, but actually it's as a payload here, and if you look at the source here, this is what's actually sent in the form data, it's just a property name, which is the name attribute, right, equal sign, the value, and then ampersand, the other one, password, which is the name attribute, equal sign, the value that I typed, and data berth, and then here's the format for the date, and so on and so on, okay, obviously the browser is very nice, that allows us to click this nicer version, that it parses that one per line, so it's easier for us to see, okay, and then you can click view decoded to make the %4 become an add sign, and the spaces become from plus to an actual space, okay, so very nice, so it's actually created something there in the fake server, if you notice that, but it's just fake, okay, and then the response from the server is okay, here's the information that I created, we added an ID, usually that's what happens when you create something new, it gives you an ID of that thing, and this is just all fake, but you got a user of ID 11 now, it's like your account number, okay, and if you notice color is blue, and favorite language on, so by default that radio, whatever you select, it appears as on here, which is kind of weird that's wrong, right, it should appear as the actual HTML, CSS and JavaScript, so we can fix that, and the other ones look okay to me, so let's fix the radio, so the radio is easy to fix, you just got to add a value, like we did for options here, you see you go back to the radio here, what you got to do is add a value for each, for this one is HTML, and then the other one would be value CSS, and then the other one would be value for JavaScript, and that way if you have a value associated with each info type radio, and you select it, that's what's going to appear when you submit the form, instead of on, if we try it again here, refresh, type something for the, I marked CSS, and let me type an email, I don't think I need the others, register, you can see here, favorite language CSS, as the payload, favorite language CSS, and if you read the actual thing that's past, favorite language CSS as well, that way you fix that problem, okay, so yeah, that's the sign up form, let me add a, let's see, a div here for this top, because I don't want the link to be next to the, this is sign up, cheap way to add a like push everything to the new line is add a div in closing that, if it's pure HTML without CSS, okay, something I didn't talk about was checkbox very similar to radio, so if I go back here, before the register, I can add something input type, checkbox, and it's just like a square instead of circle, and this one is meant to be like things to mark as, for example, usually we have something like I agree to the terms, and you would check, right, and then something like subscribe to newsletter, newsletter, and you would agree like checking that, now if you want to make that in the new line, you can add a div in closing it, to push everything like that, so it's nice to push the button register to the bottom, and here you could add like a div to group them if you want, or you can just add a, like a, if you want to add a header, like please, I don't know what to say, I agree to the terms, and then usually somebody would add a terms, right, you could do as a text area to show that, I don't want to do it, but let's add some Lauren, seven here, basically you could put a text area, scroll person would read, and then they would check, okay, I agree, yeah, any questions so far, and we're linked, we go sign up, so on, let me teach you something about associating labels with the inputs, because this you might, you might, I don't know if you know about this behavior, typically with, for example, the check, the radio here, let's go to the radio, if you click the HTML, typically you want to mark that as filled, right, but that doesn't happen when I click CSS, nothing happens, how can I make that happen, well it's easy, all you do is you take the input with the label, and put in a label tag, so I put a label open here, and then I close after the HTML text, that way if I click HTML, it's marked, very cheap, right, so if you don't like this, you can break a line to make it easier to read like that, okay, so basically you close the input and the text in a label, and that should automatically, when you click the word, it will mark it, okay, so I put a label here, label here, label, and yeah, now I can click JavaScript, CSS and HTML, you can do the same for all the other inputs, if I click email, I want that to be focused, this is what we call the state, when we click the pointer to type, that's focused, so if I scroll up here to email, and the input to associate these two, I have to do the following, find the input, add an ID attribute, an ID attribute is something that uniquely identifies the element, and there can be no other element with this ID, okay, it's unique, so add an ID here, usually I like to name it like a sign up form, and then the name of the field, which is email, that way it's very specific, and it will not lead to conflict, because there could be different things on a page, and if you label something very small like email, there could be another form that could, I don't know, by accident have the same ID, which is not permitted, and that's why I always put this kind of prefix or namespace, so it's more specific, and it's less likely somebody else will come to the code and write this very same ID, so then you take this ID and associate with the label by going to label, adding the attribute for, and then typing the same ID, sign dash up, dash form, dash email, that way when I click email it focuses the field, okay, click email it focuses, and notice I use this convention of a name, word separated by a dash, okay, for the ID, that's one name convention, but what you shouldn't do is have spaces, okay, don't put spaces here, otherwise I would think it's two different things, or you know, three different things, or four different things, okay, no spacing allowed, if you need separate words, use the dashed case, or use the camel case, or no spaces, okay, cool, that, okay, so volunteer, do you want to help out trying to associate, my goal is to click password and focus the password field, how would I do that here, so you give an ID to input, and then you write for, for the label with that same value for ID, so we would go here, give it an ID, let's say, sign dash up, dash form, dash password, go to the label you want to associate with, add for attribute, and then type the same ID, sign up, form, password, now when I click password, it focuses the field, okay, and then you can do the same for all of the other ones, you want to try doing for date or verb? Yes, now let's test it, I clicked date or verb, yes, it's focused, cool, yeah, thank you, let's talk about more, remember how I put input type email and it validated for me, now if I click register right now, it's going to complain, oh it didn't complain, why, that's weird, let's go back to the browser, because this one is a bit weird sometimes, let me just bring this up again and go to the browser external, I want to go back here and if you remember, I refresh and I click register without an email, it complains, hey, why isn't it complaining, what's going on here, did we remove type email, or is this because I got a type, oh, okay, okay, yeah, if you notice, when I don't type email, it's letting me go through, I don't want that, I want this to be required, how can we do that, well, you add the required attribute, so go to email, input, just write required there, you want to write it, yes, so it's just required and that field will be validated, if it's empty, it will complain, if I go here and save that, go to the browser refresh first and try to submit, please fill out this field, let me zoom out, zoom in for you, so this is built in HTML validation that you get by just adding the attribute required to the input, so if I don't fill anything, it's going to complain, if I type A, then the email validation kicks in due to the type email, so it's very convenient, now we can do the same for password, add it required and then biography and any other text field that you want to be, not allowed in this empty space, let's go here, let's do input, password required, yeah, biography required, I guess it could require that, date or birth as well if you want, yeah, okay, do we want to require biography, we could add that as well, try adding that, yeah, so very cheap way to validate, but I must tell you that even though we have front end validation, that's not trustworthy because anybody could go in the dev tools and change it or tamper with the request, so what we do is, although we have front end validation, what actually matters is the back end validation of the server side, we're not doing that right now, but keep that in mind that you should always, when you think about validation, never trust the front end to be something that's always going to be validated completely, somebody could always tamper with the front end, so the true validation that we should do is the back end to enforce any rules, so whenever you're developing things, it's nice to have front end validation to make it a better user experience, but I understand that we should actually be focusing validation on the back end and enforce all the rules there, because that's where the actual request is received, and there's, as you receive it, somebody could have tampered with the request, so the back end will verify that. Okay, so yeah, I think we're good for now, and with HTML.