1 00:00:05,280 --> 00:00:10,170 Welcome back in this lecture we're going to discuss how to actually submit a form as well as how to 2 00:00:10,170 --> 00:00:14,070 add labels to our form input elements. 3 00:00:14,070 --> 00:00:17,040 Now there are two main methods for submitting the form information. 4 00:00:17,040 --> 00:00:22,240 One method is the get method and another method is the post method. 5 00:00:22,280 --> 00:00:28,130 When you work out of elf forms the get method is going to request a representation of the specified 6 00:00:28,130 --> 00:00:28,800 resource. 7 00:00:28,940 --> 00:00:31,410 That is the information you provided in the form. 8 00:00:31,460 --> 00:00:33,070 First simple HTML forms. 9 00:00:33,140 --> 00:00:37,130 When we actually use the method to get what we'll see is that we're going to send back the information 10 00:00:37,370 --> 00:00:41,280 to our action your L and they will make more sense when we actually see it in practice. 11 00:00:41,300 --> 00:00:47,160 And just a little bit the other method you could provide is the post method and the post method it will 12 00:00:47,160 --> 00:00:50,560 submit data to be processed and will be using the post method. 13 00:00:50,670 --> 00:00:54,820 Once we actually learn how to connect the database with flask to the form for it. 14 00:00:54,840 --> 00:00:59,840 Now we're just going to supply an action your free redirect after submitting the form. 15 00:00:59,850 --> 00:01:04,470 The last thing will cover in this lecture is that right now our forms are just currently empty boxes 16 00:01:04,770 --> 00:01:08,790 and there's no real way of knowing which one is for the email and which ones for the password. 17 00:01:08,880 --> 00:01:12,870 So we're going to discuss how to add basic labels to the forms themselves. 18 00:01:12,870 --> 00:01:15,560 That way you can have a little bit more organization. 19 00:01:15,560 --> 00:01:18,830 All right let's jump over to the text editor and get started. 20 00:01:19,090 --> 00:01:24,600 All right here I have my basic form back my basic but each time I'll have an open forum text and my 21 00:01:24,600 --> 00:01:25,980 clothes form tag. 22 00:01:26,070 --> 00:01:30,750 Let's add two inputs one for an email and one for a password. 23 00:01:30,750 --> 00:01:37,760 So the input type is email and then the next input type will be password. 24 00:01:37,760 --> 00:01:41,890 And right now they have no name and no value will add those in just a second. 25 00:01:42,080 --> 00:01:47,380 If I refresh my page I should see two boxes one for the email and then one for the password. 26 00:01:47,390 --> 00:01:49,540 However I can't really tell which is which. 27 00:01:49,610 --> 00:01:56,180 So it would be nice if I could add a label the way we do this is if the use of a label type or create 28 00:01:56,180 --> 00:02:02,450 a label tag and notice the label tag has a for attribute and what you're going to do is connect this 29 00:02:02,450 --> 00:02:14,460 to an id attribute for the input so will say this label is for my email tag and then what I will do 30 00:02:14,460 --> 00:02:15,790 is inside of my input. 31 00:02:15,790 --> 00:02:24,440 Also id attribute equal to the same string email tag and this string is basically an arbitrary choice. 32 00:02:24,450 --> 00:02:30,600 It can say whatever you want as long as the four attribute in your label matches up with the id attribute 33 00:02:30,900 --> 00:02:37,260 for your input and then in-between the open label and this close label tag you just type out whatever 34 00:02:37,260 --> 00:02:38,210 the label should be. 35 00:02:38,340 --> 00:02:47,330 So I will say email will save this refresh and you should see a label right in front of that email. 36 00:02:48,130 --> 00:02:56,620 So let's do the same thing for the password will say label will say for I'll just make up a string pass 37 00:02:56,620 --> 00:03:05,700 tag and then set an ID equal to that same string pass tag and then will say password. 38 00:03:05,950 --> 00:03:06,800 Colon. 39 00:03:07,070 --> 00:03:09,120 Save refresh. 40 00:03:09,140 --> 00:03:14,630 And now I get some nice labels connected to their respective input boxes so I can tell that it will 41 00:03:14,630 --> 00:03:19,220 be email and this one should be password and I can zoom in a little more so you guys can see this more 42 00:03:19,220 --> 00:03:20,050 clearly. 43 00:03:20,060 --> 00:03:21,950 Here's just email here's the password. 44 00:03:21,950 --> 00:03:26,240 Keep in mind if you zoom in too much you'll start getting some formatting errors and we can always do 45 00:03:26,330 --> 00:03:28,090 is add a break element. 46 00:03:28,250 --> 00:03:35,150 So that's B.R. and that will automatically induce a break in between whatever elements there are on 47 00:03:35,150 --> 00:03:35,810 the page there. 48 00:03:35,810 --> 00:03:41,190 So if I refresh this now I get email break and then password OK. 49 00:03:41,540 --> 00:03:47,810 So I have my email labeled as well as my password label what I want to do now is add a submit button 50 00:03:48,110 --> 00:03:51,270 and also add an action in a method for my form itself. 51 00:03:52,340 --> 00:04:03,460 So here at the bottom I'm going to say input type is submit and I'll give it a value of submit. 52 00:04:03,460 --> 00:04:05,020 I'll save this refresh. 53 00:04:05,020 --> 00:04:10,030 And now I see this nice submit button here and then what I want to do is actually have some sort of 54 00:04:10,030 --> 00:04:18,860 action that's going to occur upon submitting the form so to do that I'm going to add in an action attribute. 55 00:04:18,990 --> 00:04:20,960 And this is essentially a redirect. 56 00:04:21,060 --> 00:04:25,560 It just asks when you hit submit on the form what next page should I go to. 57 00:04:25,830 --> 00:04:31,450 And typically this action is going to point to another HTL file on your own server. 58 00:04:31,560 --> 00:04:35,250 But right now since we're dealing with just a basic single team I'll file. 59 00:04:35,250 --> 00:04:44,100 Let's go ahead and redirect to for instance Google all say HTP colon forward slash forward slash W.W. 60 00:04:44,140 --> 00:04:51,420 thought Google dot com and then I will say method is equal to get. 61 00:04:51,650 --> 00:04:55,700 And I'll zoom in just a little bit so we can see everything inside the form. 62 00:04:55,730 --> 00:05:01,910 So now I'm saying OK once you hit the submit button go ahead and go to Google and get the information 63 00:05:02,180 --> 00:05:04,160 that's inside of this form. 64 00:05:04,220 --> 00:05:09,730 But right now this e-mail information and this password information does actually contain a name or 65 00:05:09,740 --> 00:05:10,540 value. 66 00:05:10,610 --> 00:05:12,710 So let's provide those. 67 00:05:12,710 --> 00:05:20,410 I'm going to say that the name is user e-mail and that the value we can just say something like e-mail 68 00:05:20,420 --> 00:05:21,480 here. 69 00:05:21,560 --> 00:05:27,830 So what happens when I save these changes and update it the value will automatically show up as a value 70 00:05:28,040 --> 00:05:29,480 inside of the e-mail. 71 00:05:29,480 --> 00:05:34,580 So typically what's going to happen is this value is going to get replaced by whatever your actual user 72 00:05:34,580 --> 00:05:35,600 provides. 73 00:05:35,600 --> 00:05:41,990 So instead of saying email here they'll delete that and let's say something like my e-mail at gmail 74 00:05:41,990 --> 00:05:42,840 dot com. 75 00:05:43,160 --> 00:05:50,210 So value will just act as some sort of value for it to start off with name user email is the name that's 76 00:05:50,210 --> 00:05:53,720 going to be associated with this e-mail that's passed back. 77 00:05:53,720 --> 00:05:55,770 Let's do the same for password. 78 00:05:56,330 --> 00:06:00,460 So for password we're going to do is just set the name equal to password. 79 00:06:00,590 --> 00:06:03,350 And again you can set these names to whatever you want. 80 00:06:03,350 --> 00:06:05,850 And if you want it you can set a value. 81 00:06:05,960 --> 00:06:11,910 But instead we can also do is set a placeholder so a placeholder is probably more common than setting 82 00:06:11,910 --> 00:06:13,700 a predetermined value. 83 00:06:13,700 --> 00:06:23,040 So a placeholder is equal to password hit save and you refresh what notice with a actual placeholder 84 00:06:23,310 --> 00:06:26,000 as you get this sort of feints text here. 85 00:06:26,100 --> 00:06:28,930 And when you click on it it basically goes away. 86 00:06:28,980 --> 00:06:32,000 So that's usually more useful than providing some pre-determined value. 87 00:06:32,190 --> 00:06:37,020 So let's replace the pre-determined value for email with a placeholder as well. 88 00:06:38,790 --> 00:06:41,140 We'll save this refresh the page. 89 00:06:41,280 --> 00:06:42,910 And now I see a nice email here. 90 00:06:42,930 --> 00:06:47,000 But the moment I click on it and start typing I get to provide my own value. 91 00:06:48,220 --> 00:06:52,000 OK so it looks like we have every thing set up for what we need. 92 00:06:52,210 --> 00:06:57,760 We have an e-mail that's labeled rumor that's connection between this for and ID as well as setting 93 00:06:57,760 --> 00:07:00,300 the form action and the method. 94 00:07:00,370 --> 00:07:04,390 So let's provide after we save this and refresh an e-mail. 95 00:07:04,630 --> 00:07:11,050 So I will say Jose Jose dot com just to make it very obvious that it's my e-mail a somewhat real e-mail 96 00:07:11,380 --> 00:07:16,570 and then password will just put in some password so I'll put password and then notice what's going to 97 00:07:16,570 --> 00:07:18,000 happen when I hit submit. 98 00:07:18,040 --> 00:07:24,460 If I actually expand this and zoom in a bit you'll notice that I was able to successfully pass in not 99 00:07:24,460 --> 00:07:26,690 just the name but its corresponding value. 100 00:07:26,920 --> 00:07:31,190 So now I see here that user e-mail is equal to Jose. 101 00:07:31,360 --> 00:07:35,050 And then there's a basically a placeholder for the at symbol. 102 00:07:35,140 --> 00:07:40,240 Since I can't really directly pass that in I passed it as per cent sign for zero. 103 00:07:40,270 --> 00:07:42,800 So Jose that COM and then I say. 104 00:07:43,070 --> 00:07:46,730 And then we just have these name value pairs so password is equal to. 105 00:07:46,870 --> 00:07:49,340 And in this case since we're just using the get method. 106 00:07:49,510 --> 00:07:52,600 It actually literally passes back the passer provided. 107 00:07:52,600 --> 00:07:57,650 Later on we'll discuss much better validation methods for this as well as better security methods. 108 00:07:57,760 --> 00:07:59,580 But that's essentially the main idea. 109 00:07:59,710 --> 00:08:06,190 I'm just going to provide these name value pairs back to either the next each team page or back to my 110 00:08:06,190 --> 00:08:06,630 server. 111 00:08:06,640 --> 00:08:09,690 When you learn how to operate this flask and Python. 112 00:08:10,060 --> 00:08:10,600 OK. 113 00:08:10,900 --> 00:08:13,640 So that's really the basics of everything we covered here. 114 00:08:13,660 --> 00:08:18,410 Again let's come back to our a text editor and explore this a little further. 115 00:08:18,460 --> 00:08:22,360 We'll come back here my browser expand this text editor. 116 00:08:22,420 --> 00:08:26,200 All we're doing is we're saying give me an action page. 117 00:08:26,200 --> 00:08:28,350 So that's the redirect page again. 118 00:08:28,360 --> 00:08:33,220 Typically it's going to be an HTML file it's living on your own server and then you'll describe a method. 119 00:08:33,430 --> 00:08:39,460 Right now we'll do the simpler one get later on we'll change the post and then we added labels in order 120 00:08:39,460 --> 00:08:42,130 to understand what each text box was referring to. 121 00:08:42,370 --> 00:08:44,860 And then we have these name value pairs. 122 00:08:45,040 --> 00:08:49,990 So we have a name and then we'll have a corresponding value that the user will provide and we can't 123 00:08:50,020 --> 00:08:54,770 either set a default value or we can set a placeholder. 124 00:08:54,820 --> 00:09:00,160 So the placeholder shows up as that great text that we have here that if we delete this we then get 125 00:09:00,160 --> 00:09:07,690 to see and then you have a submission and that will pass in and perform the redirect action OK. 126 00:09:07,800 --> 00:09:13,320 That's the very basics of actually submitting a form and adding labels to a form if you have any questions 127 00:09:13,440 --> 00:09:15,830 feel free to post to the Q&A forums. 128 00:09:15,840 --> 00:09:17,520 We'll see you at the next lecture.