Welcome back, everyone, to this lecture on form templates inside the actual HTML files.
So when passing that form tag to the template, we saw that the H2 mill tax rendered by the jangle form
widgets are all on the same line and they don't really look that visually appealing.
And what I want to do here is explore a few more details around template rendering inside the HTML files.
As a quick note, we are going to discuss CSS styling around these Django forms in more detail in a
future lecture.
So this is really just form rendering options, not really for styling options.
So how do we actually render this and what options do we have?
Let's check it out by continuing with the same project we work with in the previous lecture.
OK, so here I am.
Inside the views that PI file from the previous lecture and recall inside our rental review, we have
the outside form tag and then the input button and then the C Asraf token, and we just passed in a
single form template tag.
Now, luckily, functionally speaking, this worked just fine.
We were actually able to create a form here and then write information and submit it.
But you can see it looks kind of ugly.
And even if you begin to collapse this, you'll notice that the labels and their inputs aren't even
really connected to be at the same paragraph tag.
So you can see email here is the labels appear, but then the inputs here, and it's just super confusing
and super ugly.
And later on, we will discuss styling in a more detail CSS.
But what I want to do is just talk about the actual rendering options you have here to at least attempt
to make this look a little more usable so you can actually tell Django the rendering options you want
instead of the default one.
So what we can do is say form, and what you can say is dot as underscore p go ahead and save that change.
And what that's going to do is essentially wrap a paragraph tag.
So a tag like this around each input and label combo.
So go ahead and save that.
And when you refresh this, you should now see that instantly.
It looks a lot better.
So what actually happened here?
Well, if you are now able to check the page source, so let me right click and say view page source.
You should be able to see that these paragraph tags were being added automatically for each label and
input.
Remember, these label inputs come from the Django widgets, which come from the actual form fields.
So it's form fields create widgets which are render as label input pairs.
And by saying this as underscore p, you say OK, please wrap paragraph tags, which is kind of common
around each of these labels and inputs.
And just by doing that, you can see, OK, it's making each of these its own paragraph and that makes
its own line, and it looks a lot nicer.
You do have other options here.
What you can do is you can also render them as an unordered list.
So you could say instead of as P, you could say, as you l saved that.
And this is probably not going to look as nice.
But I do want you to know it's an option for you, depending on what forms you're looking at.
You can see here there's now bullet points, so it's an unordered list.
You can also render this as a table.
So you can say as.
Table and save that, and this will essentially make everything inside of row tax, and that's actually
looks similar to the default here, so not super useful for this particular case, but if you were to
check the source suffice a view page source I can see I have table rose and table cells, which maybe
if I had a CSI class that had a lot more variability in construction and maybe rules around how tables
should look, that would actually be a nice option for me.
So again, it kind of depends on what you're looking for, and often what we're going to do is just
pass it back as p and just by default, this is kind of one of the nicer ones.
It just puts everything on a different line.
And for many of our simple use cases, that's more than enough for us.
Now, maybe you don't even want Django to unpack the entire form for you.
Maybe you want to actually grab the fields yourself and organize them in a particular way.
Well, luckily for you, you can actually grab the fields and labels for each particular field inside
the form.
So to show you what I mean by that is recall we have forms here and essentially we have fields for a
first name, a last name and email, and then a text box review, which keep in mind, we still have
to update that in a future lecture on widgets because this is way too small of a box to write a review.
We would actually like this to be a text area, but more on that later.
Coming back here, we have first name, last name, email and review.
And what Django does automatically for you is it just unpacks all these by creating widgets which end
up creating those HTML tags.
But instead of just saying form as P and letting Django unpack everything for you, what you could do
is refer to each of those actual fields yourself manually, and you can actually separated out between
the errors, the label tag and then the subject itself.
So for example, let's imagine that I actually only want a pass in first name and last name.
How would I do that?
I would say form dot and the attribute I'm looking for, for example, form that first name and then
the label tag is label underscore tag.
And then if I want the actual feel that can say form the first name.
So now notice just by having these two lines, I'm actually not passing in the full form.
I'm just passing in the label and field input for the first thing.
Go ahead and save that change, and let's see how this changes upon refresh.
And now you can see I'm literally just grabbing only the first name and only the first name input.
And if you wanted to, you could do this for every single form field.
So you could also do this for the last name or for the review.
So I could say, OK, form dot last name and grab that label tag and then form that last name field
choice.
You come back here, refresh, and I can see now they're being both rendered.
So why would you want to do something like this?
Well, for one, it does technically allow you to only grab particular field attributes.
Maybe for some reason you don't want reviews there anymore.
But more importantly than that, it would allow you to specifically wrap this around.
Maybe its own HTML tags.
So for maybe for some reason, you want this to be under its own div.
What would you do here?
You could just create a new div and then you could grab this and put it here.
Now it's in its own diff.
And just to make it clear what's happening, maybe let's put it in its own paragraph tag just so I can
actually see that change.
Inside.
The rendering of the template, so save that, and when you refresh this, you should now see this in
its own paragraph tag.
OK, so keep in mind, you are kind of adding more work for yourself if you end up having to manually
grab every single field and label tag.
Let's kind of not the point of doing a forms it's supposed to save.
You work, not add more work for you.
And if you're going into this much detail, maybe you just wanted to them a form to begin with.
But keep in mind, it is an option there for you.
So how do we actually mix the best of both worlds?
The ability to have kind of this Django python, the idea of letting it unpack the fields for you,
but also giving us enough control that maybe I do want to add in my own div classes inside these form
label tags and fields.
Well, luckily for us, we can actually loop over the forms fields, and I think this is one of the
coolest features of the Django forms.
So this is kind of a cross or mix between the first option I showed you, which was just saying OK,
form and then something like ASP.
And just have everything wrapped in a paragraph tag and not having to individually label out each subject.
So what I can do here instead is once you create your form and you have your token, what you could
do is the following you can use a for loop.
Remember, this is kind of a jingle template language for loop.
So I say four and then you can say for field in form.
So field, this is technically something you can choose.
If you wanted to call it jelly, you could call it jelly, but I would recommend calling it field's.
Probably most readable form is what you actually past interviews.
So that is, if you scroll down here, that's this form that we passed back in the context this is before.
So you made a little for loop, you're saying for field in form.
And and actually, this needs to be percent science because it's some action code.
There we go.
So say for field in form and remember, every time you have a for loop there, you are going to need
to have an end the.
And then what you can do is you can make similar comments that are going to automatically go through
every field in the form.
So for example, let's go ahead and do the following.
And hopefully this feels familiar when we're talking about templates back when we're doing things like
for looping through an unordered list.
But what I could do is maybe create a new div for each of these, and this div could have a class.
Maybe I want it to have a class based off bootstrap or something like the form control class now actually
having a linked bootstrap up here.
But if I wanted to, I could.
In fact, let's go ahead and do that now just so we can get the actual code.
So I'm going to go to get bootstrap dot com right here, and I'm going to copy these.
And later on, we'll put these in a static file, but let me put a little bit of CIUSSS here.
Just so I have the actual links, I'm putting them in the head.
I'll have the and let's go ahead and grab the JavaScript as well.
So a copy both of those to the clipboard.
Suddenly, we've done a bunch of times now.
And so now that I have this, I should have access to actual classes like form control or something
like that.
And then what I could do is remember I'm saying for field in form and this is where I have kind of the
mix from what I had before.
So then I just need to say, OK, grab my field.
And then put it in the label tag.
And then what it costs to stay, then do the field.
And now I'm essentially creating a bunch of wrappings of different dips.
And what's nice is this actually works really nicely.
In conjunction with the way Bootstrap is structured, Bootstrap remember tended to put every single
label input into its own diff.
And now you're kind of doing that automatically by using this for loop with jingo.
So again, we're saying for field inform, go ahead and then create this new div.
Let me go ahead and save this, and then let's see what it looks like as a result.
So I'm going to go ahead and refresh that and you get something that looks like this.
It's kind of ugly right now because really the form control class shouldn't go for every single input
label combo.
But I do want to show you that, hey, by the way, it is, you know, working.
In fact, we can go ahead and inspect the page source or view page source.
And you can see now you have a div being wrapped around each of those label input pairs.
So is form control the right div?
Probably not.
So we can do here is maybe you only want that for the label tag, so you could then get the field and
maybe put it outside that and then refresh and see if it works better.
So then you have something that looks different here, and probably we end up doing is just looking
at the way the actual bootstrap is constructed.
Which if you go to the documentation, for example, if you go to their farming samples here, it would
actually be something more like maybe three to make this look nicer.
So I can say and be three there.
Save that, and let's just see if that looks a little nicer in our example.
So I bring that in.
And yeah, that looks nicer.
Maybe we put this whole thing inside a div container, and that would actually kind of be like, call
it a day.
So we come back here and put this into entire form.
Honestly, maybe the entire page.
So we can say div class is equal to container.
And then let's grab that form along with the for loop.
Cut and paste it all in there, and that's looking pretty darn good.
So we'll save that refresh and there is our form.
OK.
Not too shabby, given all the work and heavy lifting that Django was doing for us.
So what did we learn in this particular lecture as we kind of finish up here?
Well, we essentially learned you have three main options for rendering in the template.
The last option that we went through is using a for loop to actually loop through every field and that
we have kind of a lot of flexibility in the HTML code aspects, but you don't need to remember every
single field or write it down manually.
I don't need to say first name, last name, email review, etc..
Now, if you did want to do that, that was always an option for you.
Remember, the way to do that is by saying form dot the field name, such as first name and then you
have label underscore tag for that particular field.
And then if you just want the actual widget where you enter the information, the input, let's just
form dot and then that field.
So it's field and then field that label text, so form the field form dot field that label tag.
So that was the other option.
And then lastly, the very first option we could do, which is maybe the easiest is to say form.
And then as p to rep paragraph tags around each label input combo.
OK.
So later on, we're going to discuss styling and a lot more detail because styling really has to do
with the widgets.
So this is really just about template rendering.
OK.
Thanks.
And I'll see you in the next lecture.