Summary of the Transcript

Now, for the purpose of sake of time, I'm going to talk about forms now, because they're very important in the web today. We usually fill a lot of forms, you know, so let's talk about them. The first one I'm going to talk about is the text field, like single line. You know, I need to type an email, type a password, or whatever information that fits into a single line in the text field. So usually we use what's called the input element. So less than, input greater than. Now input element is also self-closing, meaning we don't need to have a closing tag. When I want to say input like that, I'm going to see this text box. If I click on it, that means I focus on the text box, I can type text. Okay. Okay, now there's different kind of inputs. So input can get an attribute so we can specify, hey, what kind of input is this? So add a space here, the attributes called type, and equal sign, double quotes, double quotes. The very basic one is text, the one that we just did. It's pretty much just for text. Now another one that you might have seen is for password. So when we type password, we cannot see, it's just bullet points or any other hidden character. So that's the type password. When I do that and click run, if I type, I only see bullet points, I don't see the actual thing. Obviously I can click this thing now that they have to show it or not. Okay. So pretty much you can control what kind of input you're going to see with the type attribute here. I think there's even date now. Let's try typing date there. You can see now it turned into a kind of calendar thing that can either type the month, day, and year, or I can click this calendar and pick and it autocompletes there for me. So this is very versatile and adaptable element that is controlled by the type attribute. There's yet another one called button. You have seen buttons, right? If you say type button there, now you're going to see a button. There's nothing there because we need to add a label. To do that, we can use the value attribute. Like so. And you can see now click me there. Okay. So as I was saying, we can control the type of this input. And I just did the button one and it needs the actual label inside. So we can click and that's with the value attribute and you can write the text here that appears inside the button. So very versatile, very important when you're making forms. Now let's do a challenge. Let's write a form for login. Typically you have email and password. So how would we go about that? Well, first we need an input for the email. So we would write less than input type. Now it can be text, but actually there's also an input specialized for email. So you can type email there. So if I do that, I can see this. And if I try to write something that's not an email, it will validate for me. Now this is nice, but I don't understand as a user what I'm being asked for. I'm being asked to fill out, right? I know it's an email because I'm writing and building it. But for somebody who's using this for the first time, they have no idea what this is. That's why we need to add labels to every form control. So there's an actual element for that. So we can add less than label, greater than, and then closing tag, and then in between you can add a label. In this case email. And I click run, I can now see email there. Okay. Now there's a nice way to associate this label with this input. When I click the word email, I should focus this input like this. So that's with the four attributes in the label. Now you need to give it an ID. So it has to be the ID of the element you want to associate this label with. In this case, it's the email here. Now this email input, we can add an ID attribute. Let's say form dash email. And then this same value has to be with the four, for the label. That way we bind this label to this input. When I click run and I click the word email, it focuses that for me. Okay. Now we can do the same if we want to add a password. Let's add a here. Label, and I'm going to say password. And then I'm going to add another thing input or the password. Now if we do it this way, I see it there. And then I can say for, let's say form dash password. This is the ID of the element I want to associate the label with. So I have to add an ID to the password input element with the same value. And if I click the password, it focuses that for me. Okay. And you might have noticed, oh, this is ugly because it's all, I kind of want the password in its own line. Now there are ways to do that with CSS to change the visuals, but we can also do HTML. So usually when we have form controls, we group them one by one inside another tag. In this case, we could group them in what's in a generic tag called the div. If I do div like this, and then I'm going to enclose the label and the input within the opening and closing. That way I'm grouping these two. Okay, I want this to be a form control group. And then I can do the same for the other div. And I place the password and the input. Now the benefit of this, you can see they now move to their own line. And that's because the div element, it occupies the whole row and doesn't let things appear side by side by default. So once we enclose these two in a div, each of them, right, it's going to take their own line instead of staying side by side. Typically when I open a tag, I visually like to add spaces. To the left, called indentation, usually two spaces. To make it better for me to visualize to understand, okay, this label is input is within the div, meaning between the opening and closing tags. Okay, and then the button here, we should add something like login or whatever. And it will be like that. Now something I forget to tell you is when we have a form, form controls, everything must be within a form element. Because we want to control the submission. When you click submit, it should do some operation somewhere. So we must make sure to always add a form element and enclose all the controls within the opening and closing tag. Okay. That way it's more proper and the form element itself, we can add attributes to control how this is going to be submitted. And for the button here, there's a special kind of type called the submit. And that's meant for the form as a whole. You can submit all of this. Now if I do that, I'm going to see that. Visually it doesn't change, right? But it's a way for us to control what's going on behind the scenes when we submit the form. So now this input being type submit is tied to the form as a whole. Does anybody have any questions? Everything good? Alright. We got still got some time. I want to give you some bonus. And that's, okay, so far these inputs are single line, but you typically have also seen inputs where you type multiple lines, right? Like a description of something or you're writing some long text, multiple paragraphs within. So that's called a text area. It's different from the input. So it's a very unintuitive, you know, because you would think, oh, let's just do an input type text area. Actually, there isn't. You have to write text area element. So let's go here and add a text area. Now the text area has opening closing. So you have to write it like this and a click run, you're going to see it there. You see, you can have multiple lines. I can break line and write things and scroll within it. That's called a text area. I can even expand it. Okay, that's the very bare bones. Now you can do the same as I did for inputs. You can add a label and tie to this. That's fine as well. Add a label, form. I don't know what to say here. It's not usually usual to have a text area when you log in, but just make the leaders. I'm going to add a reason for logging. It's weird, but okay. Reason and then you can add an ID to the text area. Form reason. Click run. Click reason, it focuses the text area. Click reason, focus the text area. So they're tied together. You might have noticed the login is there. We can also add a div in closing the two. So it pushes the login to a new line. There you go. So you might have also seen when you type into inputs that they provide kind of examples like a placeholder. And when you type, start typing, it goes away. That's called a placeholder. So let me show you how it works. So you go to whatever input you want to add a placeholder for. You add the attribute called placeholder. And then you can type whatever value. Let's say a and mail.com as an example. Example of mail.com. So these are meant to be tips or hints for the user to fill out the form. Like if I'm not sure what this means, what example should I write here. So click there, you can see now there's in gray letters. Example of mail.com, that's actually not what's typed. When I click there, it goes away. I'm going to start typing. So that's just meant to be a hint of what should go in there. And you can do the same for the others. Let's do for the text area. Placeholder. Describe the reason for login. Click around, you can see now describe the reason for login. When I click there, start typing. It goes away. And it comes back if you make it empty again. That's the placeholder attribute for form controls. In this case, input or text area.