Showing a Form in a View

Most of the time, you're going to use a form to generate some HTML. 0:00 Well, so what we want to do is to display our form 0:04 with no data filled in when someone requests our page for the first time. 0:07 We'll need to make a view, a URL route, and a template for this. 0:10 So we'd better get started. 0:14 So to show our form, we need to have a view. 0:15 I'm gonna collapse courses there, we don't need that anymore, and 0:19 let's go look at views.py. 0:23 So our current view that we have really isn't all that handy. 0:25 It's not really all that much stuff. 0:30 So we need to expand on this a little. 0:33 First of all, let's bring our forms in. 0:37 So we could do from .forms import SuggestionForm. 0:39 Make sure I got that name right, yep. 0:44 Or what I tend to prefer to do, I'll show you both of these, 0:47 is we can just do from.import forms like we did with our models in most places. 0:52 We're just gonna import the entire forms thing so 1:00 that we have all of our forms available. 1:02 In case we make other forms in the future, we don't have to keep going back and 1:05 changing our import over and over and over again. 1:08 All right, so, let's make a new view. 1:12 So we'll say suggestion_view, and it will take a request like always, 1:16 and then I need to instantiate an instance of our form. 1:22 So I'm just gonna call this form, and it'll equal forms.SuggestionForm. 1:25 And then we'll open and close our parentheses. 1:34 And then it'll return a render, like normal. 1:37 And we'll send back the request, and then we'll say 1:41 'suggestion_form.html', and then we have to send 1:45 a context dictionary to the view, and so we'll send 'form': form. 1:50 So we just send our instantiated form out to the template. 1:56 Nothing super fancy or complicated there. 2:00 All right, so just to recap, we imported all of our forms. 2:05 We made a new view. 2:08 We instantiated right here a copy of our form, and then we just did our usual 2:09 render response where we send the instantiated form out to the template. 2:15 Okay, so we need to do a couple other things. 2:22 We need to make a new URL. 2:25 Oops, don't need to edit that. 2:29 So let's come down here and make a new URL. 2:32 We already have this from.import views, so let's add a new one here. 2:35 Doesn't really matter where we've put it, 2:41 we'll just put it down here near the bottom. 2:43 So we'll do suggest. 2:45 Yeah, we'll do suggest, that makes sense. 2:48 And then we'll do views.suggestion. 2:50 What did I call that? 2:55 suggestion_view. 2:57 And then we'll name it suggestion. 2:58 All right, so that URL is not really anything special 3:04 compared to our other URLs, so that shouldn't be a big deal. 3:08 All right, so our one last piece that we need to do, 3:13 if you remember from all the other times that we've made views, 3:17 is we need to make this suggestion_form.html a real thing. 3:21 So we're gonna do that in our templates folder. 3:26 And we're gonna do a new file and we're gonna say suggestionform.html. 3:27 And inside there, let's see what we have inside home. 3:34 Yeah, we'll just copy all of that. 3:39 We'll just paste it in here so there's nothing super complicated about that. 3:43 And we'll say Suggest an idea. 3:46 And down here, inside of our class row, we need to put in our form. 3:50 So what we have to do, let's do this a couple of ways here. 3:57 So we have a form that comes in and we can just do form.as_p, and we'll save that. 4:00 Let's go over here and we'll go to suggest. 4:06 If all goes well, cool, we should see our form. 4:11 Now this is our form, and it's an average, everyday form. 4:14 If we inspect this with Chrome's developer tools, you'll see, 4:19 though, that we just have these p's, the paragraph tags. 4:24 There's no form tag anywhere in here, so we can't actually submit the form. 4:27 It wouldn't know where to go or whether to be a get or post or whatever. 4:33 And also this is the end of our form right here. 4:37 There's no submit button. 4:40 There's no way to actually submit the form. 4:43 I mean, I could press Return, or whatever, but that actually doesn't do anything. 4:45 So we need to go add all of that stuff in. 4:50 So we'll add in our form, and 4:54 we'll say action="". 4:58 We're just gonna have it go back to the same view so it'll submit back to itself. 5:02 And method= we wanna do "POST". 5:07 Okay, and then we wanna close our form tag there, and we'll indent that. 5:11 And so now that's good. 5:19 We've got a more correct thing, but we also need to put in our input. 5:22 So we'll just say type="submit", and value, for 5:28 what shows up on the button, we won't say anything. 5:32 We'll just make it say submit, that's fine. 5:38 So File > Save. 5:39 Let's go refresh this, and there is our Submit button, cool. 5:44 We can make that look a little nicer with our styling here if we just say, 5:48 class="button". 5:52 So there we go, that looks a little nicer. 5:56 Absolutely not part of doing Python or 5:58 Jango, just looks a little nicer with our layout. 6:02 Now we do have one other problem, and normally you wouldn't see this until we 6:05 get to our next video and you try to do a thing that we're going to do. 6:09 But since it's gonna come up, 6:13 I wanna talk about it now while we're building the form. 6:15 So right now, this is just our form fields that you see. 6:18 So we have a Name field, an Email field, and a Suggestion field, and 6:23 a Submit button. 6:25 Jango has a built in thing called CSRF, or cross site request forgery. 6:27 You'll also hear it called sea-surf. 6:33 And what CSRF does, CSRF makes sure that the form submission 6:36 comes from a form on the actual website. 6:41 So there's occasionally an attack vector where somebody will give you a form on 6:45 a website and it'll actually submit to a different website, and so 6:50 they're trying to capture your information. 6:55 They want you to fill in your banking username and password, and 6:57 instead of actually submitting to your bank, it submits to their own database and 7:01 then they can go look up your account later on their own. 7:04 Jango helps you prevent that by using the CSRF token and 7:07 that makes sure that the cookie is set on your browser and 7:12 the value from the cookie comes back in the form. 7:18 And we have one handy little thing here called csrf_token, 7:21 this one template tag, that we put in, and you won't see it on the form. 7:26 But if we inspect the form we can look right down here. 7:31 And we have this hidden input with the name csrfmiddlewaretoken and 7:37 this random value. 7:41 We'd get a different value all the time. 7:43 And so Jango just checks to make sure that that's set and that it's one that matches 7:46 the local site, and then we're good to go and we're able to submit our forms. 7:51 Yes, sometimes it can be a little annoying having to remember to put that CSRF, or 7:58 sea-surf token. 8:02 But that provides a really solid piece of security. 8:03 It can be disabled, but you usually only want to do that for 8:06 very specific, special cases. 8:09 So I highly recommend keeping it around. 8:11 All right, hurry back for 8:14 the next video, where we'll actually handle the submission of our form. 8:15