1 00:00:05,320 --> 00:00:11,770 Welcome back the last series of lectures for this age Tim I'll crash course are going to focus on forms. 2 00:00:11,770 --> 00:00:13,980 Let's start off with the forms basics. 3 00:00:14,950 --> 00:00:21,220 A major function of really any web site is except user information as input that can be you typing in 4 00:00:21,220 --> 00:00:23,890 a search term into Google and then hitting submit. 5 00:00:24,040 --> 00:00:29,290 That can be you registering for a web site providing your e-mail and password or really any sort of 6 00:00:29,290 --> 00:00:33,960 submission to the site where you're providing information and then clicking some kind of Submit button. 7 00:00:35,340 --> 00:00:42,420 We used a form tax to set up a form then we can add special input tags to accept user information and 8 00:00:42,420 --> 00:00:47,590 pretty much every major form element already has a corresponding input tag attribute. 9 00:00:47,640 --> 00:00:52,530 We'll discuss the basic input elements and special tags for it now and then later on we'll discuss more 10 00:00:52,530 --> 00:00:54,760 complex tags. 11 00:00:55,030 --> 00:01:00,070 At the end what we do is we provide a submit input type and that automatically adds in a button for 12 00:01:00,070 --> 00:01:05,590 form submission later on we're going to also be exploring how to create these sort of forms automatically 13 00:01:05,590 --> 00:01:07,440 with flask in Python for it. 14 00:01:07,440 --> 00:01:09,760 Now let's understand that HTL basics. 15 00:01:09,880 --> 00:01:15,190 That way when we understand how to build them a flask we can connect that to let's get started. 16 00:01:15,220 --> 00:01:15,540 All right. 17 00:01:15,550 --> 00:01:20,410 Here you have a basic thought to himself while connected to my browser and there's nothing in this HMO 18 00:01:20,680 --> 00:01:21,430 right now. 19 00:01:21,640 --> 00:01:27,730 So let's go ahead and autofill it with the basics of each table and we'll just provide a paragraph tag 20 00:01:27,730 --> 00:01:34,760 saying test saved that will refresh the page and then we can see testers showing up here. 21 00:01:34,840 --> 00:01:36,560 So we're good to go. 22 00:01:36,590 --> 00:01:43,890 Now let's come back here and can remove this test and what I'm going to do is add an A form tag so I'll 23 00:01:43,890 --> 00:01:50,520 say for hit enter and it should automatically create a opening form for you as well as a closing form 24 00:01:50,520 --> 00:01:51,290 tag. 25 00:01:51,360 --> 00:01:57,090 You'll notice that this opening form Tang has several attributes such as class action and method. 26 00:01:57,180 --> 00:02:00,600 We'll be discussing these attributes in more detail in the next lecture. 27 00:02:00,600 --> 00:02:02,630 For right now feel free to delete them. 28 00:02:02,670 --> 00:02:09,320 So you just have a basic form opening tag and a basic form closing tag inside of this form. 29 00:02:09,360 --> 00:02:12,270 You can add things like headers and labels. 30 00:02:12,270 --> 00:02:24,860 So for example I can say H-1 log in and then let's say H-2 please input your e-mail and password I'll 31 00:02:24,860 --> 00:02:30,340 save that and when I refreshed this it says log in please input your email and password. 32 00:02:30,350 --> 00:02:35,230 Now let's discuss how to actually put input tags to do this. 33 00:02:35,300 --> 00:02:41,320 You start typing out input and have a autocomplete again input tags will have attributes themselves 34 00:02:41,390 --> 00:02:44,180 such as type name and value. 35 00:02:44,300 --> 00:02:51,590 Right now let's just focus on the very basic ones which is the type attribute this type attribute essentially 36 00:02:51,590 --> 00:02:58,310 tells the browser what kind of actual input box you're going to render if it's a default text and I 37 00:02:58,310 --> 00:03:04,810 save this and refresh then you'll see a little text box show up and you can type text in here. 38 00:03:04,850 --> 00:03:10,270 There's other types such as password and this password input. 39 00:03:10,280 --> 00:03:16,790 If I save this and refresh this is an input box yes specifically designed to set passwords and what 40 00:03:16,790 --> 00:03:22,460 that means is as you begin to type you'll see that the information is hidden from view and that's because 41 00:03:22,550 --> 00:03:28,040 this input understands that passwords for security purposes should be hidden from someone looking over 42 00:03:28,040 --> 00:03:29,460 your shoulder. 43 00:03:29,480 --> 00:03:33,470 So we have these various types that we can supply to our inputs. 44 00:03:33,470 --> 00:03:38,900 Now you've probably noticed these other attributes name and value and these attributes themselves are 45 00:03:38,900 --> 00:03:44,030 going to make a lot more sense when we actually submit a form before right now you can think of value 46 00:03:44,180 --> 00:03:50,450 as the actual value that is passed back to whatever the next page or whatever to your server is requesting 47 00:03:50,510 --> 00:03:52,640 upon submission of the form name. 48 00:03:52,670 --> 00:03:55,670 Here is the identifier of this value. 49 00:03:55,670 --> 00:04:00,140 Again this will make more sense when we actually submit the forms for it now we can leave them blank 50 00:04:00,290 --> 00:04:02,960 and continue on. 51 00:04:02,970 --> 00:04:06,170 So we have an input type of password already. 52 00:04:06,240 --> 00:04:12,530 Let's create one more input type for the e-mail save this and when we refresh. 53 00:04:12,550 --> 00:04:16,910 Now I see one for my email and then one for my password. 54 00:04:17,350 --> 00:04:24,100 Then finally what we can do is add a submission button so I can type out input and then further type 55 00:04:24,220 --> 00:04:25,900 I will say submit. 56 00:04:26,100 --> 00:04:31,510 And if you just type submit like this with no name and no value save this and refresh. 57 00:04:31,510 --> 00:04:35,050 You should notice a little grace submission button that's waiting to be clicked. 58 00:04:35,260 --> 00:04:38,000 Right now there's no text inside of that submission button. 59 00:04:38,140 --> 00:04:44,500 Since we're going to do for the value of submit you can type out some sort of text string to show up 60 00:04:44,560 --> 00:04:47,020 inside of this text and so it a little button. 61 00:04:47,080 --> 00:04:51,520 So I will say enter save refresh. 62 00:04:51,850 --> 00:04:52,450 And now I see. 63 00:04:52,450 --> 00:04:53,290 Enter here. 64 00:04:53,470 --> 00:04:58,900 So I'm providing values equal to enter and now I get to see enter inside of this button for that form. 65 00:04:59,290 --> 00:05:00,050 OK. 66 00:05:00,190 --> 00:05:03,960 So let's see what happens when I actually provide an e-mail and a password. 67 00:05:04,420 --> 00:05:10,840 So I'll say my e-mail and e-mail dot com type in whatever. 68 00:05:10,840 --> 00:05:15,820 Three letters for a password enter and then right now nothing's actually happening. 69 00:05:15,820 --> 00:05:20,290 And that's because we haven't really selected any sort of action for our form. 70 00:05:20,290 --> 00:05:27,590 That is those attributes that we first saw when we typed out that form attribute tag what we'll be discussing 71 00:05:27,590 --> 00:05:33,890 in the next lecture is how to actually accept this submission of the form and then send it either to 72 00:05:33,890 --> 00:05:36,800 another page or back to your server. 73 00:05:36,800 --> 00:05:42,110 The last thing I want to point out is that these specialized types such as email will also sometimes 74 00:05:42,110 --> 00:05:44,150 prevent you from submitting the form. 75 00:05:44,150 --> 00:05:48,380 So if we come back here and we try to submit something that is not an e-mail. 76 00:05:48,700 --> 00:05:52,580 So notice this isn't an email because it doesn't have an app OPERATOR It doesn't have a dot org but 77 00:05:52,580 --> 00:05:55,250 com is just a string not an e-mail. 78 00:05:55,340 --> 00:05:58,420 And if I hit some random letters for password I hit enter. 79 00:05:58,430 --> 00:06:00,740 Notice the submissions actually get in block now. 80 00:06:00,740 --> 00:06:05,450 So some browsers will display this differently but most of them will say something like hey please include 81 00:06:05,450 --> 00:06:11,330 an ad in the e-mail address so you can notice already just by specifying the type is e-mail the browser 82 00:06:11,360 --> 00:06:17,150 will perform its own default checking to try and make sure that what's being provided is in fact an 83 00:06:17,150 --> 00:06:18,290 actual e-mail. 84 00:06:18,700 --> 00:06:19,170 OK. 85 00:06:19,400 --> 00:06:21,140 That's the very basics of forms. 86 00:06:21,140 --> 00:06:26,840 Remember you have a form tag and an input tag and the type in the impotent dictates what's actually 87 00:06:26,840 --> 00:06:32,390 rendered in the browser and certain types will have restrictions such as not being visible for password 88 00:06:32,690 --> 00:06:34,070 checking if it's an email. 89 00:06:34,280 --> 00:06:39,220 And then we finally have a submit type which will allow us to supply the information. 90 00:06:39,230 --> 00:06:43,400 We still haven't learned yet what actually happens when you click submit and connect it either to another 91 00:06:43,400 --> 00:06:46,280 page or to a server. 92 00:06:46,280 --> 00:06:52,610 Lastly I'll show you one last type of input really just for fun and that's the color input which is 93 00:06:52,610 --> 00:06:53,460 fun to use. 94 00:06:53,630 --> 00:06:58,760 So if you say type and put color hit save and then refresh the page you get to see this little cool 95 00:06:58,760 --> 00:06:59,280 button. 96 00:06:59,330 --> 00:07:01,800 And if you click on it and then you get to pick a color. 97 00:07:01,820 --> 00:07:07,190 So for example I can pick green I can change that shade of green pick teal it OK and then I'll see that 98 00:07:07,190 --> 00:07:08,700 color being updated. 99 00:07:08,720 --> 00:07:12,980 That's just the fun little impot type we probably won't use it really that often during the course but 100 00:07:13,070 --> 00:07:14,670 I just wanted to show it to you. 101 00:07:14,780 --> 00:07:15,180 OK. 102 00:07:15,320 --> 00:07:17,690 That's the basics of the actual foreign tags. 103 00:07:17,720 --> 00:07:22,280 Coming up next one of the scuzz had actually some form and had a redirect to another page. 104 00:07:22,310 --> 00:07:22,910 We'll see if there.