Okay, today is day two of the bootcamp. Yesterday we talked about HTML introduction. Today we're gonna go a little bit deeper into HTML and talk about a very crucial feature called forms. You probably have filled the form online in one way or another. And that's a very important thing to learn cause people use that all the time and not only for like official documents but indirectly or informally, as for example, in your own social media Instagram or something, and you comment on somebody else's picture or video, that's actually submitting a form in HTML. There's like a text input, right? And you type the text and you press the button to submit usually. So we're gonna learn how to write those kind of things. So here's my environment, again, I'm using Visual Studio Code and I have my directory full stack web.dev3 separated by a dash and I have the source directory of all my HTML files. We have index and news.html so far. So we can right click this and reveal in File Explorer and then you can right click that file and open up the browser or double click and you should see the, let me show you here, share my browser. You should see the web page in the browser. One moment, this one. Okay, so I open that file by double clicking it in the Explorer or Finder if you're using Mac and this is what the page looks like. You can also go from the browser and click File Open or type the URL here, the address path to that. Anyway, we have the two pages, you can read the news and then go back. So today, how about we, you know, when you go to a website today, usually you have to log in or sign in, right? How about to build that kind of form? So let's go back to VS Code and I'm gonna create a new page. So to create a new page, we create a new file, okay? So let's create the sign in page. Typically a sign in page is just a text field for your email or phone or username and then a password. That's the most traditional way, right? Then a button to log in. Of course, today we have different ways of logging in like email link, we have Google logins, social media logins, but let's keep it traditional and just go by the sign in with password. So right click Source and create a new file here. Let's call it signin.html and enter. Now, when we create a HTML file, we always have to follow the boilerplate. If you notice from the other files, let's right click this and open to the side so you can have some reference here. So you'll remember what I'm talking about. So if you don't remember as you're starting out this boilerplate, just look back at what we already have. That's a very powerful technique, not only in HTML, but in programming in general. Sometimes we forget the syntax. So what we do is we look back at what we did to remember, oh, okay, I wrote it this and that and that and okay. So when we do the boilerplate, our first thing HTML at the top is the doc type to tell the browser we're using HTML version five. So it's always like this is less than sign and then exclamation, all caps, doc type, space, HTML, greater than sign. Use HTML version five. And then after that, we define the HTML tag and inside that we have the head and the body. It's always like that. Now we already learned HTML hypertext markup language. It's a markup language in the sense that we write tags and those tags we have angle brackets that surround the element name. The angle brackets is just the character for less than and greater than, okay. So to make a HTML tag is just less than HTML, greater than. But usually the tags when you open the tag, you have to close it with another tag, that's the closing tag. So I always like to write it right away, otherwise I forget to do it later. So to close it simple, just write it like you did for the opening tag but put a slash right after the last then. So less than slash and then HTML, which has to be the same element name as the open tag. And then between that is when we write the stuff that's supposed to be contained within that element, okay. So when I say contained or as inside an element, that means between the open tag and the closing tag as we read the code, okay. Now the code can be written like this in one line like I said before, it doesn't matter but for the purposes of us humans reading the code, it's better to visualize things if you add line breaks and if you add like a spacing after each open tag, this is called indentation, okay. Every time you open a tag, you add at least two spaces starting on the left. So that's why Visual Studio Code, if you press enter, it always adds that at least two spaces indentation. Now yours might be set up for four spaces or something. If you wanna change that default whenever you press enter and Visual Studio Code, you can go here at the bottom, you see spaces two. You can click that and choose how you wanna do indentation using spaces or tabs. I like using spaces and I like using two. Other people like four and maybe they're traditional and they like eight, which is I think it's overkill for the modern programming but that's preference. Anyway, let's do the head tag, close the tag, let's do the body tag, close the body tag. And then between them is what we type the stuff. Now the body is what people are gonna see. So we're gonna write the code to show these sign in form. And then the head is metadata for this document page, which most of the time, the very basic one is using a title tag to define a title for this page. Let's call it sign in like this, close the title tag. So this is basically what you see in the tab title in the browser. Okay, going back to the body, we usually focus always on the body and the other stuff we can ignore for now. We already have the boilerplate. So when we build forms in HTML, we have to create a container element and that's called the form element. So you always wanna have the form tag like this and then don't forget to close it. And between them, it's the form itself, the form fields. So for a sign in form, we're gonna have the email and the password and some button to submit. Okay, let me see if I can annotate here. So we have the form, right? So the user interface, what we see, right, is usually input field like a rectangle where we type some tags, right? And then there's usually a label here, right, at the before or to the left. And then after that, there's another one for the password. And then finally, there's a button that says, okay, I want to login. That's gonna be your user interface. This is like my draft for what we're gonna build, okay? If you're interested in this aspect of design, it's design and user interface, okay? That's UI, that's what people call it, abbreviation. Anyway, enough of that, that's our wireframe. I'm gonna clear that and let's get to it. So how do I build? Let's first start with the tags field. That's using the element called input. So make a tag, call it input. Now, this is a special tag. Like I told you before, remember when we did an image tag, the image tag didn't need a corresponding closing tag because it is self-closing. The same way it's for input. It's a self-closing tag, so you don't have to type input like this. It's not necessary, so you can just omit, okay? Now, if you have it just like this, you're gonna see a tags field. Let's see the live preview. If you recall from yesterday, you can either open this page in the browser or you can have the live preview that's conveniently on the side of Visual Studio Code. So let me close this right hand side panel and I'm gonna do the live preview to open it. Before you, if you're new here, just to install it, just click extensions, look for live preview, enter and install the one for Microsoft, click install. I already have it, that's why it says disable. Now, once you got that, I can go here, click the file that I want back to the Explorer. Now I wanna preview, let me do sign in. I have it open here. So I'm gonna view command pallet or you can press control shift P and you should see this text box with a greater than sign. And make sure there's a greater than, sometimes people delete it, you need the greater than. If you delete it, add it back, okay? And then you're gonna look for live preview, show preview internal browser. That way you can have on the side the preview of this page. So every time I change my code, I don't have to be reloading my page every time. It automatically does that for me. Okay, so you can see there's a text box here and I can type hello, like that. Okay. I don't know what happened there, just select all. So that's in the input, it's in its most basic form. You can type whatever text there, but if from the point of view of the user that is gonna access your website, he doesn't know what the heck is going on. Okay, there's a text box, I can type something. What is that? What are they looking for? So this has gotta be assigned in form, so we need to add a label just to tell the user, hey, I want you to type the email, for example. So before the input, we add a label element. So we're gonna do angle brackets, label. And this one needs a corresponding closing tag. So you're gonna add that as well. Now between the tags is what the user is gonna see. So let's say email there and you see the text email up here. Okay, so that way the user knows, okay, this is a text field for the email. Great, now let's talk more about the input. This input thing is very versatile in the sense that you're gonna see later on it can take on many forms. So it can be just an input generic for any kind of text or it can take on the form of being an email text field or a password text field. And those are more specialized because in the case of email, it will validate your format. If you recall, an email is always something at sign, domain, right, dot com or whatever. And for the password, usually we don't see the characters, right, they're usually bullet points or asterisks or something hidden. So that's why we can tell the input to behave in a different way. And usually to tell an element to behave in a different way, we have to tell it some attributes, give it some attributes. Okay, so how do we add attributes? If you recall, remember we added attributes for the anchor tag with href for image with source SRC for the audio and video SRC. So go to the open tag. There's only one open tag and there's no closing, right? For the input, right-hand side of its name out of space. And for this purpose, the name of the attributes type, okay? And then equal sign, double quotes, double quotes. Between the double quotes is what you're gonna type for the value of the input. Yeah, but the default one is text. So that's the one that we already had. Now, if you wanna make this email, just simply change that to type email. That way it will validate your typing an email. Now, we cannot see it right away that's doing anything. Visually is the same thing, right? I can type whatever here. We only see the validation when you click the submit button that we'll add later. Once we do that, you'll see that they will complain, hey, this is not an email if you type it wrong. Okay, enough of that. Let's move on to another field. Let's add the password field. So the password is the same way. We can add first a label to add a label there. Password, close the label tag, just like that. And then let's add an input for the password. So input and then add the attribute type. The value here is gonna be password. And then close the opening tag. Now, if you go here for the second input and type hello, it's all bullet point. I can't see it. That's the difference between type text and type password. Okay? And one funny thing here is maybe you might ask, I know some websites, there's a feature where I click to see the password. How does that work? Well, actually what they do is they manipulate the document. They use JavaScript, which is the programming language that allows you to change your webpage in real time. What they do is they simply go to this element using the code and it changes the type to text when you click the button. So when you click the button to hide, it will actually do the reverse. We'll change type to password. So that's how they do that. Okay, you might have noticed our style kind of sucks. Everything is one line. If I make it big width. And that's mostly because we don't have, we're working with just HTML right now. Usually when to change the style of a page, we use what's called CSS, Cascading Style Sheets. We don't have it right now, but there's a way to make this a little better with just HTML. And the way we do that is we group every single label and input into a kind of generic containers that we call a div. Okay, so if you take here, before the label for email, you add an open tag for div. That's the name of the container, okay? This is just a generic HTML element that can be used for whatever you want. It doesn't have any particular semantic meaning. It's just a generic container or box, okay? So I'm gonna enclose the label and the input in this div. So meaning I have to have it between the open div tag and then the closing tag that I type right after the input. Remember, the closing tag has a slash. And then usually for the sake of readability of the code, I always add to press tab here after selecting these two lines to add the indentation, which is the space on the left. You might notice every time I open tag, it adds two extra spaces for each open tag. And then when it goes back to closed, it goes back one level. And that gives us a sense of visual depth. And I understand, oh, this label is inside the div, this input is inside the div, okay? It's just a trick we use to make a readability of the code easier for us to understand what's going on right away, although not necessary. And like I said before, when you say something's inside an element, that just means when the code is written, it's between the opening tag and the closing tag, okay? So this thing could be one line and it wouldn't matter, right? But just make sure it's between the open and close. You gotta be careful with that. Many beginners probably, they forget to add a closing tag or they mismatch the tags and the document just becomes broken or something unexpected shows up, okay? So be careful, make sure there's always an aligning, open and close. And the visual studio code or any other text editor, usually has these vertical lines, you see them here. The vertical lines is a visual aid to let us know this. Opening tag has a corresponding closing tag here. So you can follow the vertical line to find the other corresponding. So if you don't have a corresponding tag or anything, it's probably broken and you won't see the line there pointing to the right thing. Anyway, enough of that, we always like to group these labeled inputs inside a generic container. Let's do the same for password. So if I do that and in close with a div there, I have it nicely organized. Okay, I have the grouping for the email, the grouping for password. And like I told you, the benefit of doing that, at least in raw HTML, is that it pushes the next group to another line. And the reason for that as we'll learn later is because the div by default has the CSS property of display as a block, a display block, it doesn't allow anybody to be next to it. So the email container here with the div is saying, hey, I'm gonna occupy this whole row and I don't want anybody next to me on the same line. So it pushes the password to the next one. And password in turn does the same thing because it's now under a div container. Make sense? If you have questions, let me know in the chat. Hope this makes sense to you. Maybe it's too easy. Well, how's everybody feeling? Have you learned this already? Was it your first time? All right. Okay, let me teach you a nice trick here. I don't know if you ever noticed this in websites. If I go here and I click email, typically there's a feature that when I click email, it will focus the field here. The term that I use is when you click to type here, it's called focus, okay? Focus. And if I click email, nothing happens. I'm clicking the word email. I want something to happen. And that is I wanna focus this automatically so I can type something. This is a nice feature that you can do. And I'll tell you the mechanism right now. So basically what you gotta do is go to the input and you have to give it an ID to attribute. ID stands for identifier. So to add an attribute, you can go to this one here that exists outside the quotes out of space. Oops. And ID, that's the name of the attribute, equals sign double quotes, double quotes. Now the ID has to be a unique value. I suggest you use lowercase and if you need to have separate words, separate of the dash, please don't add space. Otherwise you're gonna think it's two different things. In general, programming languages, you don't wanna have space between stuff, okay? Don't add space for ID. Let me call it just email to make it simple. Maybe I'd like to add a sign in form dash form prefix to make it more unique and descriptive to what it means because it's a unique thing. There can be no other HTML element with the same ID. Okay, that's important. And you see that separate the words with a dash in our lowercase to keep it simple. Okay, so by giving the input an ID, we can identify it. Now I can go to the label tag, the open, and add an attribute called four. And the value for four will be the exact same ID of the input that you wanna associate the label with. So I'm gonna copy that, control C, and paste it there or you can type it out. So what that does is it associates the label with this input by its ID. So when I click the word email, it focuses that. So I can start typing there. See that? If I click outside, then click back, it focuses. So that's the mechanism here. Let's do the same for password. So basically I wanna be able to click password and then focus to type. So go to the input for password, add an attribute ID. Let me add the prefix sign in dash form dash password. And then go to the label you wanna associate with. Add the four attribute, type the exact same ID or copy and paste, sign in dash form dash password. Now let's test it out. Let me save this. I go here, click password, and it's focusing. Okay, it's important for you to get into the habit of always testing your changes out. Every time you make a change to your code, save the file, go back to what you had and test it out, click something to see if it's behaving the way you expect, okay? Click faster, that's correct. If you find it's not behaving the way you want, probably you've made a mistake, there's a bug and you gotta go back and fix it until you get it right. So it's important to us getting the habit of testing. This is called testing, right? Okay, great. Now let's add a button to submit this. How do we add a button? Well, still under the form, make sure you're inside, right, between the open and closing tags. I'm gonna do after this grouping for the password. We can add a button here. Now there are two different ways, typically people use for a submit button. The one way you can do is with the input element and the other way is with the button element. If you do input element, you can do input like this, but remember input is a text field, right? But it actually can take on many forms. So you can change the type with the attribute type to say it's an input type submit. And now it becomes a submit button like that. You see that? Now if you wanna change the text, the label for the button, you have to add another attribute here called value. So add a space after this quotes, value equals, let's say sign in. And you see that the label for the button changed. Now if I click there, nothing's gonna happen because we didn't hook up the form to anything. Okay, now the other way you might come across as well is with the button. I didn't talk about button, but if you wanna add any kind of generic button to the page, you can use the button element like this and make sure to close it. And the text for the button goes between the open and closed tag. So for example, hello world, that will show there, but I'm gonna type sign in there. And this button here, is this the generic one. If you want that to be part of the form, you would say button type submit. Okay, that's a different way of having submit button. So you can use this one on line 16 or the other one, whichever you think is nicer, okay? So I'm gonna remove one of them, but for the sake of keeping a reference here for you, I'm gonna keep this code, but make the computer or browser ignore this and not render the button. And we do that via what we call comments. Okay, so to make ignore code, you have to enclose it in this following syntax. So you have to type less than exclamation dash dash. And this is marks the beginning of a comment. So everything starting from that will be ignored by the browser as it renders. And then I want to ignore up until this point here. So I'm gonna type dash dash greater than. You can see visual studio code is so nice that it kind of highlights the code, all the tags and everything. And the comments are highlighted kind of greenish color. That's called syntax highlighting, okay? If you were to open this notepad or any other plain text editor, you're not gonna see all these colors. Okay, it's just a need for us to better visualize the code. But you can see this is now a comment, right? Everything between these punctuation here is ignored. You're not gonna see that. So if I change the sign in, whatever, one, two, three, you still don't see the button, right? All we have is the button type submit from line 17. Okay, so I'm just doing that to teach you about comments and to leave a reference here for you that you know, okay, you can also type make a button just for submission with an input element. Okay, let's add a H1 here at the top before the form. Let's say sign in, that's nicer. Okay, that's our sign in page. Now let's go back to index and actually link to this page. So if you wanna refresh your memory, how do we link from index to this page? Now, if I go back to index, I can control shift B, live preview to show it on the side. And I wanna be able to have a link at the top to go to sign in. So let's add after read news, read the news here. I'm gonna add a link. So anchor tag A, right? A, the attribute is href and you have to give the name of the file, signin.html and close the angle bracket and let's go, let's type sign in and then close the tag for A. And you can see sign in there. I know it's kind of messy. If you wanna make it a new line right now, you can add a div to force it to take the whole row. It's a quick fix to put it in a new line. And yeah, it's there. So when you click sign in, it goes to the sign in page. If you're on sign in, for some reason, when I put a link back to the homepage, you can go there and add an anchor to the top. Maybe here, if you were an actual website, we actually have a header, right, of navigation. So maybe add an anchor, href, index, html, home, something like that. So when I click home, it goes back, click sign in, it goes here. Oh, good. Now let me show you that validation thing that I was talking about. Let's see if I... So when you have a form, it has... You click submit, it has to go somewhere and submit the information. So the information you type in the form, it typically is sent as a request to a server, what we call a backend server, okay? There's a server that's always listening to requests. And when you submit the form, it goes to that server and says, hey, I wanna submit this information and the server would take a request and honor it if you are allowed to do so, right? You have authenticated and authorized to do it. And then it gives you back a response. Traditionally, it takes you back to another page saying success, whatever. In this case, a sign in form. Typically, if you click sign in, it goes, it does all the authentication, right? So you become authenticated to the system. And then it goes back to the homepage or your dashboard or your profile, something like that. It's a redirection, okay? Otherwise, it will tell you, hey, we could not authenticate you. That was a problem, authenticating, right? There's an error message that appears, something like that. And just out of curiosity, when you have sign in and authentication, you don't wanna tell them your email, your password is wrong because that will allow people who are malicious actors to figure out people's passwords by trial in there. So you wanna be discreet and not let the user know what exactly failed, right? Was it a password or an email or whatever? So you're always ambiguous. You wanna say, oh, authentication failed, check your email or password, something must be wrong. Okay, you don't wanna give out too much information in that case. Enough of that security tip. Okay, so let's submit this to a fake backend server. I got a fake one for you. So you can see what it looks like, submission. Let me see. So when we wanna submit something, go to the open form tag. So you have to give two attributes, typically, traditionally, right? One is the method and the other is the action. Now, the action attribute is the address or URL, form resource locator. And this is the one I'm gonna use. I'm gonna paste it in the Zoom chat. It's just a fake one. It's not real, okay? And then the method, there's typically two methods, but when you submit a form, we usually use post, always. Submit information is post. Now, to understand what is post, what is this stuff? You have to understand how the browser gets your web page. Let me try to show that right now. Here's the website, go to the address bar, type some URL. That's what we call this. And enter. When you do that, you make a request to a server somewhere that will serve you the file, the HTML file, and any other stuff that it might need. Now, when you do that, the way you communicate with that other computer that's elsewhere is through a protocol, okay? It's called HTTP, hypertext transfer protocol. Okay, it's just a definition that's, if you wanna communicate, you gotta follow these rules, okay? And then within that specification, when you make a request, you have to let it know what kind of method or verb, and that could be get or post. Those are the two most popular ones. So for the purposes, when you get an HTML page, right, you type in the browser, enter, that's a get request, okay, a get request. Get request is typically used to obitain some information. So you're getting some web page back. So I wanna get this specific address, and then you get it back and the browser receives the file, like index.html, and it will interpret the file, and then render the web page. If you're curious about that, you can always press F12 in the browser, and that should open the dev tools, developer tools. You can monitor the request by clicking Network tab and go and reload. So watch what happens. But before you do that, make sure your filters here are all instead of the other stuff, click All. I'm using Firefox right now, so the UI is a little bit different from Chrome, but I was doing Chrome as well, but this is the same functionality. You see what happens when I click refresh, that reload button, it monitor that request. So you can read here, it's a method get, and the file was index.html. So you can click that row and get information about that request, okay? So that's a method get. Now, going back to the form, let me also show Chrome, because many people use Chrome, but it's the same. Let me see here, same kind of thing. Go to the web page, F12, Network tab, close this thing, it's kind of annoying. Let's see, close with that. And now you can see that, click All, refresh, and you can see the same thing, status 200. Click that, click Hatters, and you see here a request method get. So that just telling you, if you don't remember any of this, it's open DevTools, it always makes a get request when you access a website. Now that you want to suit HTTP get, let's go back to that form. So this is the method for forms we don't use get, and the reason we don't use get is because you're gonna expose all the information in the URL of the request. I'll demonstrate that to you. If I put get here, we should not do this, okay, we should always use post, but let me see, let me show you what happens. And to demonstrate this, I'm gonna go to the external browser because this environment here is not so great to do the DevTools. So I'm gonna go back to the browser. Let's do Chrome, I'm here, F12. If you don't know about F12 key, you can always right click, inspect, that also brings up the DevTools. And click network, and then we're gonna go to the form, sign in, and I'm gonna type something. But before I do that, let me see if a validation is working. Oh, there's no validation, that's wrong. But anyway, let's look at this. You can see it make a request here, but I didn't type anything, so let me go back and type something at mail.com. Let me make this bigger for you. And I'll type secret password here, click sign in, and you see when I click this, where is that? Oh, I know what's going on, sorry about that. I don't see any information here being submitted. And the reason is because the form fields are not annotated with what they mean. Okay, so I was expecting to see what I submitted here in the request URL, but I don't see, do you see this question mark? I'm supposed to see the email of Houseward. The reason for that is because we gotta annotate the fields. So the backend server will know what kind of information each of the things are. So going back to the code, what we gotta do is for every input, everything that the user is typing or selects a value, we have make sure it has an attribute name. So for the email here, we have an input line 12. Make sure that has an attribute name. And you could give an arbitrary name. You wanna be descriptive or like email. That seems good to me. Go to the password one, add the attribute name, and then call it password. Now, you might have noticed my VS code is kind of like pushing the line to another line. That's because I'm using view word wrap option. If I don't have that, it looks like this, okay? So yeah, I have to scroll horizontally. I don't like scrolling horizontally. So that's why I use that feature, okay? So I click view word wrap. Anyway, make sure every single input in your form has a name attribute with a value. So that the server backend, when they receive information, they'll know, okay, whatever you type in this text field is for email. Whatever I type in the password field is for password, okay? That's important. Let's go back to the browser, test it again. Remember, we changed the code. We always wanna make sure to test. So I'm gonna go back. I'm gonna refresh because we changed the code. It has to load the new page. And then now that I'm here, let me see. Okay. Hello, mail.com, secret. I have the names, attributes, reach, inputs. So the backend should be able to understand that. Aha, do you see the network tab? They see the email there and the password. That's what I was expecting. Now that we have the names, they are usually encoded. So the attribute, the new value for the name attribute appears like here, email equals sign, the value for that. Hello, percent 40, mail.com. And when you have multiple values, key value pairs, right? It combines them with the ampersand. And password equals secret, that's my password. You might have noticed that this percent 40, that's because certain characters are encoded to other things because they're kind of special. So every time you submit the at sign, you're gonna see percent 40. Okay. And if you click payload here, this is very nice feature from the DevTools, allows you to debug or investigate this submission of the form. And you can see the email was hello, mail.com, password was this. If you click view URL encoded, you can see that the at sign becomes this percent 40. And when you decode it, it goes back to at. And you click view source, this is actually how it looks like raw as it's sent to the server. It's just like this, some name value, right? Name of the property equals sign, the value. And then if you have more ampersand, another one, name equals and then the value and so on and so on. And this parsed is just a nice feature of the browser. So you can better parse that and see it like this, line by line. Okay, but you notice when I submit this to the browser, everybody can see my password. So that's the problem with making a get request for form submission. That's why we don't do this. We don't want to expose the password in the URL of the request. Cause if I look at this, you can see the header request URL, it includes the password. I don't want that there because usually the backend servers, whenever they receive a request, they will log. Log means a record. We received a request from this person at the IP, whatever for this URL. And they're doing that every time we request, every service dude does that. So whatever people do on the internet is recorded. Like you make a request, records in some file, log file, that's what we call it. So we don't want to be submitting the form and logging out of users passwords and personal information. That's why we don't do get for forms. Don't do get for forms. So let's go back and fix that. What we do is instead of method get, we always use method post for forms, okay? Post. And the difference will be obvious. When it's post, the form fields will go in the body of the request instead of the URL. That way the server will not be able to log any of those, that information. So once you got that down, let's go back and test. Go back here and refresh because I changed the code. And I want to make another submission, meamail.com, my password, sign in. I make sure the network tab is open. And now if you click that and you observe the request URL under the header step, I don't see that email and password anymore. That's because it's a post request, post method. When it's post, what happens is that information is included in the body of the request. And that's usually, if you go to the DAB tools, you click payload, that's where it is now. And you click build a source, it's the same encoded, right? Same format and pattern. But it's now in a different place. And that place, the loggers on the server side will not be able to show, record that. Okay, they don't record that stuff. Okay. Now to wrap up, how about we talk about validations? Because you might notice, okay, sometimes the user might type something that we don't expect or don't accept, okay? I must say though that validation must be enforced on the server side. So that means the person in charge of the backend server should make sure that they always validate the information that's received because we can never guarantee that what information that's sent or received by them is accurate or is legit or is in the correct format, okay? So that's why you can never trust front end or the website side information being submitted. Although I'm gonna show you how you can validate on the front end, that should not be your first line of defense. You should always make sure that's validation on the server side at least. And then if you want to be fancier and make your users have a better user experience, UX, you can add some front end validations for feedback there. Okay, so let's do front end validations here. You notice if I don't type an email password, it submits and that's not good. We wanna require a password and an email, right? So how do we do that? Well, it's very easy. Go back to the code, locate the fields you want to be marked as required. So we want the email one, that's the input, add an attribute called required. And that's it, simply say required. And this is a special attribute that doesn't need an explicit value, right? You can just type the name of the attribute and it will be marked as a required input. So the user has to type at least one character. Same thing for password, you can mark that as required by adding an attribute required. And all this is leveraging what we called HTML5 built in validation, okay? So now save that, go back to the browser. If I refresh to bring up the new code, I click sign in, look what happens. It tells me please fill out this field and marks the email there. Okay, let me type ABC. Oh, it's still saying please include at, ABC is missing at. So if I click sign in, it's always complaining about the email format. And that's why I put input typed email instead of typed text. Because if I just had typed text, I could type ABC and it would be accepted as email. But if I type, have the input type email, it will automatically validate and ask, hey, you need an ad sign, okay, at, it's still bad, so okay, me.com. Okay, now it's an email format pattern. Okay, let's add a password. I'm gonna leave it blank, click sign in. And tell me, please fill out this field. That's very powerful by validations built in from the browsers. Okay, I'm gonna type my password. And finally, I will let me go through. Okay, so that's front end validation. And there are other attributes that you can look up later. For example, how many characters do you wanna require at least for the password? Maybe at least six characters. Maybe you have a text field, like you're commenting on a video, YouTube video, right? Maybe you cannot type so many characters. Maybe you're in like the Twitter acts and they only, they used to allow what? Certain number of characters cannot go over that. So you can add a validation for that using HTML attributes, okay? So I'm not gonna, I don't have time to talk about that, but you can always look it up. How do I enforce validate for length of an input? Or you can ask your chat dbt or whatever fancy AI tool you have today. For example, how to limit input field HTML, enter, and have some resources here. I really like the W3 schools resource. And it just points me to the right thing. Okay, it tells me about the input attribute. Oh, max length. Okay, let me read this. So I can try for myself. A left-hand side is the code that you can change on the right-hand side is what is corresponding to the code if you click run. And you can see here, the input has an attribute max length then, okay, if I put max length three and click run, what happens? Let's type username, A, B, C, D. It doesn't let me type D because the max length is just three characters. So that's very nice. Okay, and I think there's also minimal length and all this kind of stuff. So you can look it up and find out. Like I said, I think I put this as a resource for you to look up this W3 schools to go over the tutorial by yourself, to go over the exercises. You can learn more about these other kind of tags and attributes, cause obviously there's so many of them we cannot possibly go over all of them. Most of them, we barely use them. So I just try to teach you the most popular ones that are used. And again, I wanna reiterate that if you need to learn how somebody else's website was built, you can always see the code, right? What if I wanna go here? How did they build this green button? I think it's pretty. I can just right click that in the browser, click inspect and I will understand how they built that button. Oh, they use an anchor tag. It's actually a link. They just built an anchor tag with these attributes. And on the right hand side is the styling. As we'll learn later is the CSS cascading style sheets that you can actually change it here like that. So you can see your middle time. That's just a sneak peek of CSS, which will be the next lecture. All right, and with that I finished this lecture.