1 00:00:05,250 --> 00:00:10,200 Welcome back, everyone, to this lecture where we're going to begin discussing forms and part one, 2 00:00:10,200 --> 00:00:14,670 we're talking about the basics a little bit of background to understand how forms work and then how 3 00:00:14,670 --> 00:00:16,800 to construct a basic form in our ED. 4 00:00:18,370 --> 00:00:25,600 Now, when you visit a website, you may have noticed the URL starts with each http HDD P stands for 5 00:00:25,630 --> 00:00:27,730 hypertext transfer protocol. 6 00:00:28,120 --> 00:00:32,619 And this is to say that it's the protocol used to enable communication, which we're essentially just 7 00:00:32,619 --> 00:00:36,790 talking about each time L transfer right now between a client and a server. 8 00:00:38,050 --> 00:00:43,980 HTP s just means that the HDP is secured, usually through encryption. 9 00:00:44,760 --> 00:00:49,920 Now when I'm talking about HDP, I'm just talking about how information can go between a server and 10 00:00:49,920 --> 00:00:50,460 a client. 11 00:00:50,760 --> 00:00:52,680 And there's actually many methods available. 12 00:00:52,680 --> 00:00:59,460 Using HDP to really common methods are the get method, which requests data from a source. 13 00:00:59,760 --> 00:01:04,290 And another really common method is the post method, which sends data to a server. 14 00:01:04,860 --> 00:01:09,660 Now, the reason I mention these is because you'll see me type out get when we actually build out a 15 00:01:09,660 --> 00:01:10,620 form later. 16 00:01:10,950 --> 00:01:15,090 You don't need to worry too much about guest and post right now, but become more important when we 17 00:01:15,090 --> 00:01:17,130 talk about the back end with Django. 18 00:01:18,810 --> 00:01:24,420 Now, a typical user just interacting with a Web page isn't really going to be aware of the get and 19 00:01:24,420 --> 00:01:29,370 post that is happening behind the scenes, but they actually still use them often when they're filling 20 00:01:29,370 --> 00:01:31,120 out a form on a page. 21 00:01:31,530 --> 00:01:37,740 Now, forms aren't just general forms to collect things like you're signing up for a website. 22 00:01:38,040 --> 00:01:42,510 It's really a lot of different ways of getting information from a user. 23 00:01:42,900 --> 00:01:47,490 For example, when you actually fill out a Google search, you're technically filling out a form that 24 00:01:47,490 --> 00:01:50,610 just has a single text field and then a submit button. 25 00:01:51,000 --> 00:01:57,390 So try to think about the different forms you see on web applications when you use them every day. 26 00:01:59,020 --> 00:02:03,700 Forms are one of the most important HTML elements and structures we're going to be learning about, 27 00:02:03,910 --> 00:02:08,590 since it's the main way we're going to end up receiving information from the client using the website. 28 00:02:08,919 --> 00:02:14,980 When a client ends up uploading a photo or maybe updating a social media post, these are really all 29 00:02:14,980 --> 00:02:18,940 just forms that they're actually using with get and post requests. 30 00:02:19,510 --> 00:02:25,180 Now, inside an HTML form, there's going to be some key tags and those are the input tax and the label 31 00:02:25,180 --> 00:02:29,140 tags or the attributes play a large role in determining how they work. 32 00:02:30,900 --> 00:02:36,330 So the label tag will dictate what the user can see on the form page and the input tag that takes what 33 00:02:36,330 --> 00:02:38,700 the user can actually provide as information. 34 00:02:39,120 --> 00:02:44,250 Let's explore these concepts inside our code editor by setting up our very first form. 35 00:02:45,030 --> 00:02:47,940 OK, here I am back at Visual Studio Code Editor. 36 00:02:48,480 --> 00:02:54,990 Now, something I want to point out is the fact that when you hit submit on a form, you're typically 37 00:02:54,990 --> 00:02:57,870 redirected to another page on the website. 38 00:02:58,140 --> 00:03:02,430 And we're going to do the same thing here, except since we're doing this all inside visual studio code, 39 00:03:02,670 --> 00:03:06,810 I'm actually going to explore and I'm going to create a new file. 40 00:03:07,790 --> 00:03:15,440 And this new file is just going to be called, let's say, other HTML and this other HTML is going to 41 00:03:15,440 --> 00:03:16,280 be very simple. 42 00:03:16,800 --> 00:03:19,250 Just going to have heading one and it'll say. 43 00:03:20,290 --> 00:03:20,770 Thank you. 44 00:03:21,550 --> 00:03:23,080 And that's all it's going to say. 45 00:03:24,190 --> 00:03:29,260 But what I'm going to do right now is just build out a form on example h html. 46 00:03:29,470 --> 00:03:34,270 Later on, we'll see how we can redirect it upon submission to go to other HTML. 47 00:03:35,150 --> 00:03:37,430 I'm going to type out form. 48 00:03:38,810 --> 00:03:46,700 And notice the default is you start building out a form and you have an action and then you have the 49 00:03:46,700 --> 00:03:48,200 closing tag for the form. 50 00:03:48,650 --> 00:03:50,870 So what does action actually represent? 51 00:03:51,230 --> 00:03:57,560 Well, it's going to be basically where the user goes after they submit the form. 52 00:03:57,560 --> 00:04:01,490 So what action should the form actually do upon submission? 53 00:04:02,330 --> 00:04:07,340 In our case, we'll say the action is to go to other dot h html. 54 00:04:08,590 --> 00:04:13,900 Later on, this will be kind of more complex, but just for right now, we'll keep it very simple where 55 00:04:13,930 --> 00:04:19,060 once the user submits the form, the forms action is to go to other HTML. 56 00:04:20,000 --> 00:04:25,310 Then we're going to do is set up both a label tag and an input tag. 57 00:04:27,230 --> 00:04:34,370 First, let's begin with the actual input tag, so I'm going to start typing out input and you'll notice 58 00:04:34,370 --> 00:04:38,740 that there's actually many different types of inputs that we can use for right now. 59 00:04:38,750 --> 00:04:43,220 I'll just select the most basic one, and part two will discuss a bunch of different input selection 60 00:04:43,220 --> 00:04:44,450 options or types. 61 00:04:44,960 --> 00:04:46,220 So I'll just input. 62 00:04:46,520 --> 00:04:49,760 And by default, the type is a text input. 63 00:04:50,150 --> 00:04:54,560 So text input is just a box here that I can type text into. 64 00:04:54,830 --> 00:04:55,850 And that's all it is. 65 00:04:55,850 --> 00:04:58,160 It's just input inside a form. 66 00:04:58,700 --> 00:05:01,880 And then maybe I want to put in another input. 67 00:05:03,210 --> 00:05:05,460 And again, the default type is text. 68 00:05:05,490 --> 00:05:09,210 Notice how they begin to align on the same actual line. 69 00:05:09,660 --> 00:05:14,270 If you want them to be on different lines, we can use a break tag for this. 70 00:05:14,340 --> 00:05:17,310 And that's a B.R., which allows for a break. 71 00:05:17,460 --> 00:05:18,450 And then notice here. 72 00:05:18,840 --> 00:05:24,570 Now we have the first text box on top of the second one, and that is B.R.. 73 00:05:24,600 --> 00:05:28,290 Also notice it technically doesn't really need a closing break tag. 74 00:05:28,950 --> 00:05:31,290 So I have these two input types. 75 00:05:31,710 --> 00:05:36,930 The other really important input type to understand is the submit input type. 76 00:05:37,410 --> 00:05:43,530 So I'm going to hit input here, except now I'm going to say this is submit type. 77 00:05:45,530 --> 00:05:47,810 And no, once I change it to type submit. 78 00:05:48,110 --> 00:05:55,040 Each team understands that this is a button I can click to execute the action of the form it's related 79 00:05:55,040 --> 00:05:55,280 to. 80 00:05:56,630 --> 00:06:02,390 In fact, let's see what happens right now if I just put in some very basic information into this form. 81 00:06:02,960 --> 00:06:07,930 So I just have these two kind of random text inputs and then a submit input. 82 00:06:07,940 --> 00:06:12,790 And if I hit submit notice, I'm now at other HTML. 83 00:06:13,310 --> 00:06:18,470 And later on, we're actually going to be able to see the URL be expanded so that we can actually see 84 00:06:18,500 --> 00:06:20,960 what the user actually provided as information. 85 00:06:21,350 --> 00:06:25,250 Right now, we're not technically saving or even understanding what the user actually typed in. 86 00:06:25,640 --> 00:06:32,180 All I'm saying is if I go back here, the fact that I have inputs that can accept different types of 87 00:06:32,180 --> 00:06:34,250 information right now, they're just text information. 88 00:06:34,550 --> 00:06:40,790 And then I have a special input type known as submit that says, OK, grab the information from all 89 00:06:40,790 --> 00:06:44,210 the other inputs and then go ahead and perform the forms action. 90 00:06:44,600 --> 00:06:49,610 So typically, we're going to see submit at the very bottom, and we probably want to have a break here 91 00:06:49,610 --> 00:06:51,200 so that we can see at the bottom. 92 00:06:51,470 --> 00:06:58,190 And sometimes people like to add multiple breaks just to kind of space out these actual input and output. 93 00:06:58,460 --> 00:06:59,660 I wouldn't worry about that too much. 94 00:06:59,660 --> 00:07:03,380 Later on, we're going to learn about bootstrap, which will help us make these forms look a lot nicer. 95 00:07:03,680 --> 00:07:06,110 So I'm going to remove some of these breaks. 96 00:07:09,720 --> 00:07:15,450 And now what I'm going to do is add in a label that we, the user actually knows what they're actually 97 00:07:15,450 --> 00:07:16,650 typing this for. 98 00:07:17,040 --> 00:07:19,980 So how do I connect a label to an input? 99 00:07:20,460 --> 00:07:24,030 It doesn't just have to do with the order, it appears in HTML. 100 00:07:24,390 --> 00:07:30,600 We're going to need to assign an I.D. to the input and then we can say what the label is for which I 101 00:07:30,600 --> 00:07:31,470 d is it for. 102 00:07:32,040 --> 00:07:39,210 So if you type out label, you notice that it has an opening and the closing tag, which is indicative 103 00:07:39,210 --> 00:07:42,210 that you're going to type something in between the opening and closing tags. 104 00:07:42,450 --> 00:07:45,210 Unlike an input where you just had a single tag. 105 00:07:45,780 --> 00:07:51,960 So for the label, I can say something like first name and note or first name colon. 106 00:07:52,360 --> 00:07:55,710 Now look how it's right next to this input. 107 00:07:56,250 --> 00:08:01,110 However, each HTML doesn't technically know that this label is officially for this input. 108 00:08:01,560 --> 00:08:04,860 The way we can do that is by saying something like this is for. 109 00:08:05,850 --> 00:08:10,650 If name and then insight of input, I can give this the I.D.. 110 00:08:12,000 --> 00:08:14,040 Of f name. 111 00:08:14,520 --> 00:08:20,490 And so now we know for sure this label is associated with this, regardless of what order they appear 112 00:08:20,490 --> 00:08:20,700 in. 113 00:08:22,000 --> 00:08:25,510 And now let's do the same thing for the second input. 114 00:08:26,020 --> 00:08:30,040 I'll create another label and we'll say this is for L name or last name. 115 00:08:30,550 --> 00:08:33,760 And then I will sign an I.D. here equal to. 116 00:08:34,970 --> 00:08:35,539 L name. 117 00:08:35,840 --> 00:08:38,870 And let's just say the actual text here is last name. 118 00:08:39,500 --> 00:08:43,820 Now you can really see this is starting to look like a form you would see on a real website, first 119 00:08:43,820 --> 00:08:49,400 name and last name, and then the action to go to its other HTML that just says thank you. 120 00:08:49,760 --> 00:08:57,500 So upon hitting submit, you're going to grab all the inputs and then execute the action from the form. 121 00:08:58,010 --> 00:09:04,340 So I can say something like my first name, so say my last name is portela hit submit and now it says 122 00:09:04,340 --> 00:09:04,910 thank you. 123 00:09:05,300 --> 00:09:09,470 You may have noticed, however, that there's no actual collecting of the information. 124 00:09:09,470 --> 00:09:11,870 We're not sending it to the other page. 125 00:09:12,350 --> 00:09:17,810 If we actually want to send it to the other page in a programmatic way, I can actually assign a name 126 00:09:18,020 --> 00:09:18,890 for the input. 127 00:09:19,490 --> 00:09:25,280 So let's go ahead and say name is also f name for the input. 128 00:09:26,060 --> 00:09:32,300 And then here I'm going to say the name attribute is l name for this input, and it's pretty common 129 00:09:32,300 --> 00:09:35,920 to have things like the four ID and name all match up. 130 00:09:35,930 --> 00:09:38,780 So that way it's really clear what is actually happening here. 131 00:09:39,230 --> 00:09:41,990 But notice what happens when I actually assign a name. 132 00:09:42,820 --> 00:09:50,760 To this input and then go back here and say first name, so it's a last name is 40A and hit submit notice 133 00:09:50,790 --> 00:09:51,790 happens in the URL. 134 00:09:52,780 --> 00:09:58,690 So in the URL, you can actually now see that I'm beginning to pass in what are essentially key value 135 00:09:58,690 --> 00:10:03,350 pairs where I can say, OK, the first name that was passed in was equal to Jose. 136 00:10:03,730 --> 00:10:07,570 And the last thing that was passed in was equal to Porsche. 137 00:10:07,990 --> 00:10:12,190 And later on, we're going to be able to do a lot more than just send it to the HTML. 138 00:10:12,220 --> 00:10:18,100 And typically, you're going to not send it to the URL like this if it's secure information like a password. 139 00:10:18,340 --> 00:10:22,750 You don't want to just display the password in the URL, but you get the idea now that I can actually 140 00:10:22,750 --> 00:10:29,620 now send information from one page hit, submit and send it over to the next page. 141 00:10:29,830 --> 00:10:30,970 Pretty cool so far. 142 00:10:31,510 --> 00:10:36,730 The other thing I want to point out is there's actually different types of inputs beyond just text. 143 00:10:37,120 --> 00:10:42,520 For example, let's actually create now a form for collecting an email and a password and just get a 144 00:10:42,520 --> 00:10:43,480 little bit of practice here. 145 00:10:43,750 --> 00:10:45,460 We're going to start all the way from scratch again. 146 00:10:45,880 --> 00:10:49,120 So step one, I create my form action. 147 00:10:49,420 --> 00:10:50,980 Let's go to other HTML. 148 00:10:52,510 --> 00:10:59,610 And now I want a label and an input for the email and then a label and an input for the password and 149 00:10:59,610 --> 00:11:00,490 then a submit button. 150 00:11:01,180 --> 00:11:05,020 So what's nice is to actually start here at the bottom because, you know, you're going to have a submit 151 00:11:05,020 --> 00:11:10,240 button so we can just say, submit here and then automatically we create that submit button. 152 00:11:10,720 --> 00:11:16,810 The other thing to point out is you can actually provide a value, which is a string of what you want 153 00:11:16,810 --> 00:11:18,250 the submit button to say. 154 00:11:18,250 --> 00:11:23,710 So I can say click here and then that will actually overwrite the default submit. 155 00:11:24,010 --> 00:11:25,000 So it's kind of up to you. 156 00:11:25,030 --> 00:11:30,100 Again, that is the value attribute, and there's a lot of attributes for a lot of different types of 157 00:11:30,100 --> 00:11:30,580 inputs. 158 00:11:30,610 --> 00:11:34,840 We won't go through every single one because we'll slowly introduce them throughout the course, but 159 00:11:34,840 --> 00:11:35,770 now I have my input. 160 00:11:36,100 --> 00:11:40,570 And if I were to click this, it would just execute the action without doing anything or really by just 161 00:11:40,570 --> 00:11:41,570 going to other HTML. 162 00:11:41,590 --> 00:11:42,910 So you hit, submit and boom. 163 00:11:43,300 --> 00:11:44,950 Well, we actually want to collect information. 164 00:11:45,760 --> 00:11:49,210 So the first piece of information I want to collect is, let's say, their email. 165 00:11:49,570 --> 00:11:51,960 So we're going to say this is for email. 166 00:11:52,300 --> 00:11:55,990 This label, and it's actually going to show the user email. 167 00:11:57,050 --> 00:12:00,380 And then let's create an input for that. 168 00:12:01,070 --> 00:12:05,180 And there's actually a special input type for email. 169 00:12:05,780 --> 00:12:11,150 You'll notice it pretty much looks exactly the same as the text input type, but you'll see in a second 170 00:12:11,150 --> 00:12:13,730 why it's actually special and why it's called email. 171 00:12:14,480 --> 00:12:17,480 Then what I'm going to do is create a break here of B.R.. 172 00:12:18,690 --> 00:12:21,450 And let's add in another label for the password. 173 00:12:21,780 --> 00:12:23,430 I'll say this is for P.W. 174 00:12:24,500 --> 00:12:27,020 And the actual text that shows up will say password. 175 00:12:28,450 --> 00:12:35,140 And then the input type here is going to be password says, actually again, a special type of input 176 00:12:35,140 --> 00:12:35,830 for password. 177 00:12:36,250 --> 00:12:38,680 Keep in mind, I can't just put anything I want and type. 178 00:12:38,920 --> 00:12:45,040 There are only a limited amount of types of inputs, so I can't just say something like gobbledygook 179 00:12:45,040 --> 00:12:46,930 here and then expect this to work. 180 00:12:46,960 --> 00:12:52,090 No, it's there's a special type called password, as there's a special type called email and there's 181 00:12:52,090 --> 00:12:53,440 a special type called text. 182 00:12:53,860 --> 00:12:57,190 And then what I'm going to do here is also put in a break. 183 00:12:59,800 --> 00:13:00,370 There we go. 184 00:13:00,910 --> 00:13:05,020 So now I have my email and my password and then submit. 185 00:13:05,230 --> 00:13:08,350 You can also see that depending on how Zoom than you are, there's actually a little bit of automatic 186 00:13:08,350 --> 00:13:09,430 resizing that happens here. 187 00:13:09,430 --> 00:13:10,870 But don't worry about that for right now. 188 00:13:11,560 --> 00:13:16,420 OK, so we have our email and we have our password, and then we have submit they're labeled. 189 00:13:16,600 --> 00:13:19,540 But they're actually not connected yet, so I'm going to add in an ID. 190 00:13:21,270 --> 00:13:27,690 So we're going to say it is equal to email and then also say name as equal to email. 191 00:13:29,630 --> 00:13:31,490 And we'll do the same thing for this input. 192 00:13:31,520 --> 00:13:40,700 We're going to say it is equal to P.W. for password and then also say name is equal to P.W. for password. 193 00:13:41,940 --> 00:13:43,290 Turn those double quotes there. 194 00:13:43,860 --> 00:13:48,390 OK, so I have my labels, my inputs and for email and password. 195 00:13:48,420 --> 00:13:49,740 Starting to look like a real form. 196 00:13:50,130 --> 00:13:54,670 Let's go ahead and make an example up salsa example at Domaine Gqom. 197 00:13:55,470 --> 00:13:58,350 So you may be wondering, well, this looks just like a normal text. 198 00:13:58,380 --> 00:14:00,120 Why was email type special? 199 00:14:00,450 --> 00:14:01,590 I'll show you that in a second. 200 00:14:01,950 --> 00:14:06,420 But since I said password type notes happens when I start typing up my password, which I'll just say 201 00:14:06,420 --> 00:14:06,930 is password. 202 00:14:07,820 --> 00:14:14,120 It automatically knows, hey, this is a password input, I should conceal this from being seen by someone 203 00:14:14,120 --> 00:14:15,020 over their shoulder. 204 00:14:15,350 --> 00:14:21,260 So pretty cool by just specifying a particular type of input for these special types. 205 00:14:21,530 --> 00:14:25,520 It's HTML and your browser is smart enough to know the default behavior for some of these. 206 00:14:25,730 --> 00:14:28,900 I can hit, submit and notice now it says thank you. 207 00:14:28,940 --> 00:14:35,060 And here and other h html, I can see the emails pass by and then the password was also passed. 208 00:14:35,090 --> 00:14:38,550 Again, we're not going to typically just show the password here in the URL, but you get the idea. 209 00:14:38,550 --> 00:14:41,150 I'm passing information to the next h html page. 210 00:14:41,810 --> 00:14:46,430 Now, the other thing I want to show you is why email is actually special as an input type. 211 00:14:46,760 --> 00:14:53,540 Let's imagine I just try to say hello for my email, and then let's put in some P.W. for my password 212 00:14:53,930 --> 00:14:54,710 if I hit submit. 213 00:14:55,400 --> 00:14:57,260 Remember, I said, this has to be an email. 214 00:14:57,650 --> 00:15:02,510 And again, the browser smart enough to know, OK, this is input type, email and what you're putting 215 00:15:02,510 --> 00:15:02,690 in. 216 00:15:02,690 --> 00:15:04,910 Hello, text doesn't even have an at symbol. 217 00:15:05,150 --> 00:15:08,230 So there's no way it can be an email, and it won't actually let me submit this. 218 00:15:08,240 --> 00:15:09,680 It has a sort of automatic error. 219 00:15:10,070 --> 00:15:15,710 So pretty advanced stuff here with the latest versions of HTML and browsers to be smart enough to understand, 220 00:15:15,950 --> 00:15:20,570 Hey, you said this is a type email, so I'm not going to let them submit until it looks something like 221 00:15:20,570 --> 00:15:21,110 an email. 222 00:15:21,590 --> 00:15:25,550 And we're going to talk later on about other different types of validation. 223 00:15:25,640 --> 00:15:27,320 Reform aren't inputs. 224 00:15:27,340 --> 00:15:31,640 So maybe you want to have a bunch of restrictions on a password like ask to be a certain length or a 225 00:15:31,640 --> 00:15:35,480 certain number of characters, you know, all those kind of annoying little validators that you have 226 00:15:35,480 --> 00:15:37,730 to put in when you're filling out or making a new password. 227 00:15:38,000 --> 00:15:43,310 You yourself can add those in with a form later on, but right now, that's all we wanted to really 228 00:15:43,310 --> 00:15:44,480 show you for the basics. 229 00:15:44,510 --> 00:15:47,090 Again, to recap, you have a form. 230 00:15:47,480 --> 00:15:52,930 It's going to have an action that can go to another page and then you have labels and inputs. 231 00:15:52,970 --> 00:15:59,120 The labels are connected through the four I.D. relationship, and then the input can actually have a 232 00:15:59,120 --> 00:15:59,600 name. 233 00:15:59,630 --> 00:16:02,540 So you can refer to it later on in your code. 234 00:16:02,870 --> 00:16:08,510 So when I hit submit here after saying something like hello at Domain Gqom, it submits that name is 235 00:16:08,510 --> 00:16:13,160 going to allow us to say, OK, my email is this variable connected to Hello Domain. 236 00:16:13,310 --> 00:16:18,740 Com And then password is password, but you get the idea that name is going to be programmatically valuable 237 00:16:18,740 --> 00:16:19,790 to us as a variable. 238 00:16:20,210 --> 00:16:25,820 And then once you hit submit here, which you could overwrite the value there, then you're able to 239 00:16:25,820 --> 00:16:28,400 actually submit and perform the action. 240 00:16:28,790 --> 00:16:32,060 The other thing I wanted to tell you is there's another attribute called placeholder. 241 00:16:32,600 --> 00:16:37,310 So I can say placeholder here and just pass in placeholder texts like email goes here. 242 00:16:37,790 --> 00:16:43,190 And then once you start typing on this, you can see the placeholder text goes away until it's empty 243 00:16:43,190 --> 00:16:43,460 again. 244 00:16:44,340 --> 00:16:45,550 All right, that's it for this lecture. 245 00:16:45,570 --> 00:16:46,410 I'll see you at the next one. 246 00:16:46,590 --> 00:16:51,480 We're going to discuss a couple of more different input types that are will that will be useful to you. 247 00:16:51,930 --> 00:16:52,800 I'll see you at tonight's lecture.