Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We know how to create a form but how do we go about showing it in a view?
You instantiate a form like you instantiate any other class, by using the class name and parentheses.
You can use {{ form }} to display all of the form fields automatically. You can also get to each field with {{ form.field }} but this is more rare.
More information about CSRF.
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
You need to sign up for Treehouse in order to download course files.
Sign up