1
00:00:05,330 --> 00:00:11,720
Welcome back, everyone, to this lecture on form templates inside the actual HTML files.

2
00:00:13,060 --> 00:00:18,880
So when passing that form tag to the template, we saw that the H2 mill tax rendered by the jangle form

3
00:00:18,880 --> 00:00:23,320
widgets are all on the same line and they don't really look that visually appealing.

4
00:00:23,710 --> 00:00:29,650
And what I want to do here is explore a few more details around template rendering inside the HTML files.

5
00:00:30,070 --> 00:00:36,340
As a quick note, we are going to discuss CSS styling around these Django forms in more detail in a

6
00:00:36,340 --> 00:00:37,180
future lecture.

7
00:00:37,450 --> 00:00:42,310
So this is really just form rendering options, not really for styling options.

8
00:00:42,550 --> 00:00:45,070
So how do we actually render this and what options do we have?

9
00:00:45,400 --> 00:00:49,330
Let's check it out by continuing with the same project we work with in the previous lecture.

10
00:00:49,660 --> 00:00:51,160
OK, so here I am.

11
00:00:51,160 --> 00:00:58,450
Inside the views that PI file from the previous lecture and recall inside our rental review, we have

12
00:00:58,450 --> 00:01:05,080
the outside form tag and then the input button and then the C Asraf token, and we just passed in a

13
00:01:05,080 --> 00:01:06,610
single form template tag.

14
00:01:07,070 --> 00:01:10,030
Now, luckily, functionally speaking, this worked just fine.

15
00:01:10,240 --> 00:01:14,470
We were actually able to create a form here and then write information and submit it.

16
00:01:14,830 --> 00:01:16,840
But you can see it looks kind of ugly.

17
00:01:16,840 --> 00:01:21,400
And even if you begin to collapse this, you'll notice that the labels and their inputs aren't even

18
00:01:21,400 --> 00:01:24,130
really connected to be at the same paragraph tag.

19
00:01:24,130 --> 00:01:29,530
So you can see email here is the labels appear, but then the inputs here, and it's just super confusing

20
00:01:29,530 --> 00:01:30,490
and super ugly.

21
00:01:30,790 --> 00:01:33,940
And later on, we will discuss styling in a more detail CSS.

22
00:01:34,240 --> 00:01:38,770
But what I want to do is just talk about the actual rendering options you have here to at least attempt

23
00:01:38,770 --> 00:01:46,720
to make this look a little more usable so you can actually tell Django the rendering options you want

24
00:01:46,900 --> 00:01:48,190
instead of the default one.

25
00:01:48,430 --> 00:01:58,240
So what we can do is say form, and what you can say is dot as underscore p go ahead and save that change.

26
00:01:58,270 --> 00:02:02,470
And what that's going to do is essentially wrap a paragraph tag.

27
00:02:02,680 --> 00:02:06,880
So a tag like this around each input and label combo.

28
00:02:07,600 --> 00:02:09,240
So go ahead and save that.

29
00:02:09,250 --> 00:02:13,780
And when you refresh this, you should now see that instantly.

30
00:02:13,780 --> 00:02:14,890
It looks a lot better.

31
00:02:15,010 --> 00:02:16,450
So what actually happened here?

32
00:02:16,840 --> 00:02:23,920
Well, if you are now able to check the page source, so let me right click and say view page source.

33
00:02:24,310 --> 00:02:29,800
You should be able to see that these paragraph tags were being added automatically for each label and

34
00:02:29,800 --> 00:02:30,190
input.

35
00:02:30,310 --> 00:02:36,610
Remember, these label inputs come from the Django widgets, which come from the actual form fields.

36
00:02:36,730 --> 00:02:40,870
So it's form fields create widgets which are render as label input pairs.

37
00:02:41,170 --> 00:02:49,540
And by saying this as underscore p, you say OK, please wrap paragraph tags, which is kind of common

38
00:02:50,350 --> 00:02:52,270
around each of these labels and inputs.

39
00:02:52,270 --> 00:02:57,010
And just by doing that, you can see, OK, it's making each of these its own paragraph and that makes

40
00:02:57,010 --> 00:02:59,230
its own line, and it looks a lot nicer.

41
00:02:59,530 --> 00:03:00,790
You do have other options here.

42
00:03:01,030 --> 00:03:04,120
What you can do is you can also render them as an unordered list.

43
00:03:04,630 --> 00:03:09,540
So you could say instead of as P, you could say, as you l saved that.

44
00:03:09,550 --> 00:03:11,380
And this is probably not going to look as nice.

45
00:03:11,380 --> 00:03:15,010
But I do want you to know it's an option for you, depending on what forms you're looking at.

46
00:03:15,340 --> 00:03:18,920
You can see here there's now bullet points, so it's an unordered list.

47
00:03:19,300 --> 00:03:21,580
You can also render this as a table.

48
00:03:21,610 --> 00:03:22,660
So you can say as.

49
00:03:23,980 --> 00:03:30,760
Table and save that, and this will essentially make everything inside of row tax, and that's actually

50
00:03:31,150 --> 00:03:36,730
looks similar to the default here, so not super useful for this particular case, but if you were to

51
00:03:36,730 --> 00:03:43,630
check the source suffice a view page source I can see I have table rose and table cells, which maybe

52
00:03:43,630 --> 00:03:50,500
if I had a CSI class that had a lot more variability in construction and maybe rules around how tables

53
00:03:50,500 --> 00:03:52,750
should look, that would actually be a nice option for me.

54
00:03:53,110 --> 00:03:57,250
So again, it kind of depends on what you're looking for, and often what we're going to do is just

55
00:03:57,250 --> 00:04:02,880
pass it back as p and just by default, this is kind of one of the nicer ones.

56
00:04:02,920 --> 00:04:04,360
It just puts everything on a different line.

57
00:04:04,600 --> 00:04:07,240
And for many of our simple use cases, that's more than enough for us.

58
00:04:08,310 --> 00:04:13,290
Now, maybe you don't even want Django to unpack the entire form for you.

59
00:04:13,710 --> 00:04:20,190
Maybe you want to actually grab the fields yourself and organize them in a particular way.

60
00:04:20,579 --> 00:04:28,260
Well, luckily for you, you can actually grab the fields and labels for each particular field inside

61
00:04:28,260 --> 00:04:28,740
the form.

62
00:04:28,740 --> 00:04:35,010
So to show you what I mean by that is recall we have forms here and essentially we have fields for a

63
00:04:35,010 --> 00:04:40,830
first name, a last name and email, and then a text box review, which keep in mind, we still have

64
00:04:40,830 --> 00:04:45,570
to update that in a future lecture on widgets because this is way too small of a box to write a review.

65
00:04:45,600 --> 00:04:48,840
We would actually like this to be a text area, but more on that later.

66
00:04:49,440 --> 00:04:53,280
Coming back here, we have first name, last name, email and review.

67
00:04:53,670 --> 00:04:59,520
And what Django does automatically for you is it just unpacks all these by creating widgets which end

68
00:04:59,520 --> 00:05:01,410
up creating those HTML tags.

69
00:05:01,800 --> 00:05:07,770
But instead of just saying form as P and letting Django unpack everything for you, what you could do

70
00:05:07,770 --> 00:05:14,190
is refer to each of those actual fields yourself manually, and you can actually separated out between

71
00:05:14,190 --> 00:05:17,970
the errors, the label tag and then the subject itself.

72
00:05:18,780 --> 00:05:23,040
So for example, let's imagine that I actually only want a pass in first name and last name.

73
00:05:23,190 --> 00:05:23,770
How would I do that?

74
00:05:23,790 --> 00:05:29,880
I would say form dot and the attribute I'm looking for, for example, form that first name and then

75
00:05:29,880 --> 00:05:34,050
the label tag is label underscore tag.

76
00:05:34,560 --> 00:05:40,590
And then if I want the actual feel that can say form the first name.

77
00:05:41,160 --> 00:05:45,700
So now notice just by having these two lines, I'm actually not passing in the full form.

78
00:05:45,720 --> 00:05:50,220
I'm just passing in the label and field input for the first thing.

79
00:05:50,700 --> 00:05:54,150
Go ahead and save that change, and let's see how this changes upon refresh.

80
00:05:54,900 --> 00:06:01,050
And now you can see I'm literally just grabbing only the first name and only the first name input.

81
00:06:01,290 --> 00:06:05,070
And if you wanted to, you could do this for every single form field.

82
00:06:05,280 --> 00:06:07,740
So you could also do this for the last name or for the review.

83
00:06:08,220 --> 00:06:18,630
So I could say, OK, form dot last name and grab that label tag and then form that last name field

84
00:06:18,630 --> 00:06:19,110
choice.

85
00:06:19,470 --> 00:06:23,490
You come back here, refresh, and I can see now they're being both rendered.

86
00:06:24,300 --> 00:06:25,920
So why would you want to do something like this?

87
00:06:26,310 --> 00:06:31,440
Well, for one, it does technically allow you to only grab particular field attributes.

88
00:06:31,440 --> 00:06:33,750
Maybe for some reason you don't want reviews there anymore.

89
00:06:34,050 --> 00:06:38,550
But more importantly than that, it would allow you to specifically wrap this around.

90
00:06:38,730 --> 00:06:40,390
Maybe its own HTML tags.

91
00:06:40,410 --> 00:06:44,040
So for maybe for some reason, you want this to be under its own div.

92
00:06:44,040 --> 00:06:45,000
What would you do here?

93
00:06:45,300 --> 00:06:52,270
You could just create a new div and then you could grab this and put it here.

94
00:06:52,290 --> 00:06:53,370
Now it's in its own diff.

95
00:06:53,370 --> 00:06:58,170
And just to make it clear what's happening, maybe let's put it in its own paragraph tag just so I can

96
00:06:58,170 --> 00:06:59,370
actually see that change.

97
00:07:00,470 --> 00:07:01,190
Inside.

98
00:07:02,200 --> 00:07:07,330
The rendering of the template, so save that, and when you refresh this, you should now see this in

99
00:07:07,330 --> 00:07:08,410
its own paragraph tag.

100
00:07:08,770 --> 00:07:16,750
OK, so keep in mind, you are kind of adding more work for yourself if you end up having to manually

101
00:07:16,750 --> 00:07:19,780
grab every single field and label tag.

102
00:07:19,810 --> 00:07:22,750
Let's kind of not the point of doing a forms it's supposed to save.

103
00:07:22,750 --> 00:07:24,550
You work, not add more work for you.

104
00:07:24,850 --> 00:07:28,930
And if you're going into this much detail, maybe you just wanted to them a form to begin with.

105
00:07:29,230 --> 00:07:31,480
But keep in mind, it is an option there for you.

106
00:07:32,200 --> 00:07:35,350
So how do we actually mix the best of both worlds?

107
00:07:35,470 --> 00:07:42,310
The ability to have kind of this Django python, the idea of letting it unpack the fields for you,

108
00:07:42,460 --> 00:07:51,250
but also giving us enough control that maybe I do want to add in my own div classes inside these form

109
00:07:51,250 --> 00:07:52,630
label tags and fields.

110
00:07:53,500 --> 00:07:58,390
Well, luckily for us, we can actually loop over the forms fields, and I think this is one of the

111
00:07:58,390 --> 00:08:00,700
coolest features of the Django forms.

112
00:08:01,090 --> 00:08:06,070
So this is kind of a cross or mix between the first option I showed you, which was just saying OK,

113
00:08:06,070 --> 00:08:09,910
form and then something like ASP.

114
00:08:11,200 --> 00:08:17,260
And just have everything wrapped in a paragraph tag and not having to individually label out each subject.

115
00:08:17,530 --> 00:08:23,200
So what I can do here instead is once you create your form and you have your token, what you could

116
00:08:23,200 --> 00:08:25,630
do is the following you can use a for loop.

117
00:08:26,130 --> 00:08:28,960
Remember, this is kind of a jingle template language for loop.

118
00:08:28,960 --> 00:08:33,309
So I say four and then you can say for field in form.

119
00:08:33,970 --> 00:08:37,059
So field, this is technically something you can choose.

120
00:08:37,059 --> 00:08:41,320
If you wanted to call it jelly, you could call it jelly, but I would recommend calling it field's.

121
00:08:41,320 --> 00:08:45,070
Probably most readable form is what you actually past interviews.

122
00:08:45,370 --> 00:08:50,770
So that is, if you scroll down here, that's this form that we passed back in the context this is before.

123
00:08:51,190 --> 00:08:54,100
So you made a little for loop, you're saying for field in form.

124
00:08:54,610 --> 00:09:00,580
And and actually, this needs to be percent science because it's some action code.

125
00:09:00,880 --> 00:09:01,360
There we go.

126
00:09:01,630 --> 00:09:07,720
So say for field in form and remember, every time you have a for loop there, you are going to need

127
00:09:07,720 --> 00:09:09,640
to have an end the.

128
00:09:10,870 --> 00:09:16,600
And then what you can do is you can make similar comments that are going to automatically go through

129
00:09:16,600 --> 00:09:17,770
every field in the form.

130
00:09:17,890 --> 00:09:21,330
So for example, let's go ahead and do the following.

131
00:09:21,400 --> 00:09:25,330
And hopefully this feels familiar when we're talking about templates back when we're doing things like

132
00:09:25,330 --> 00:09:27,070
for looping through an unordered list.

133
00:09:27,400 --> 00:09:33,730
But what I could do is maybe create a new div for each of these, and this div could have a class.

134
00:09:34,060 --> 00:09:40,270
Maybe I want it to have a class based off bootstrap or something like the form control class now actually

135
00:09:40,270 --> 00:09:42,100
having a linked bootstrap up here.

136
00:09:42,100 --> 00:09:43,270
But if I wanted to, I could.

137
00:09:43,450 --> 00:09:48,140
In fact, let's go ahead and do that now just so we can get the actual code.

138
00:09:48,160 --> 00:09:53,380
So I'm going to go to get bootstrap dot com right here, and I'm going to copy these.

139
00:09:54,520 --> 00:09:57,880
And later on, we'll put these in a static file, but let me put a little bit of CIUSSS here.

140
00:09:57,940 --> 00:10:01,090
Just so I have the actual links, I'm putting them in the head.

141
00:10:01,180 --> 00:10:04,690
I'll have the and let's go ahead and grab the JavaScript as well.

142
00:10:04,690 --> 00:10:06,520
So a copy both of those to the clipboard.

143
00:10:06,790 --> 00:10:08,200
Suddenly, we've done a bunch of times now.

144
00:10:08,680 --> 00:10:13,570
And so now that I have this, I should have access to actual classes like form control or something

145
00:10:13,570 --> 00:10:13,990
like that.

146
00:10:15,130 --> 00:10:21,700
And then what I could do is remember I'm saying for field in form and this is where I have kind of the

147
00:10:21,700 --> 00:10:23,050
mix from what I had before.

148
00:10:23,050 --> 00:10:26,410
So then I just need to say, OK, grab my field.

149
00:10:27,780 --> 00:10:29,520
And then put it in the label tag.

150
00:10:31,440 --> 00:10:33,570
And then what it costs to stay, then do the field.

151
00:10:35,190 --> 00:10:39,090
And now I'm essentially creating a bunch of wrappings of different dips.

152
00:10:39,270 --> 00:10:42,150
And what's nice is this actually works really nicely.

153
00:10:42,150 --> 00:10:47,520
In conjunction with the way Bootstrap is structured, Bootstrap remember tended to put every single

154
00:10:47,520 --> 00:10:49,500
label input into its own diff.

155
00:10:49,800 --> 00:10:54,600
And now you're kind of doing that automatically by using this for loop with jingo.

156
00:10:54,780 --> 00:10:58,650
So again, we're saying for field inform, go ahead and then create this new div.

157
00:10:58,950 --> 00:11:03,210
Let me go ahead and save this, and then let's see what it looks like as a result.

158
00:11:04,020 --> 00:11:08,700
So I'm going to go ahead and refresh that and you get something that looks like this.

159
00:11:08,820 --> 00:11:15,120
It's kind of ugly right now because really the form control class shouldn't go for every single input

160
00:11:15,120 --> 00:11:16,170
label combo.

161
00:11:16,410 --> 00:11:19,570
But I do want to show you that, hey, by the way, it is, you know, working.

162
00:11:19,590 --> 00:11:23,330
In fact, we can go ahead and inspect the page source or view page source.

163
00:11:23,790 --> 00:11:29,880
And you can see now you have a div being wrapped around each of those label input pairs.

164
00:11:30,240 --> 00:11:32,430
So is form control the right div?

165
00:11:32,550 --> 00:11:33,120
Probably not.

166
00:11:33,510 --> 00:11:40,140
So we can do here is maybe you only want that for the label tag, so you could then get the field and

167
00:11:40,140 --> 00:11:44,460
maybe put it outside that and then refresh and see if it works better.

168
00:11:44,760 --> 00:11:48,810
So then you have something that looks different here, and probably we end up doing is just looking

169
00:11:48,810 --> 00:11:51,390
at the way the actual bootstrap is constructed.

170
00:11:52,380 --> 00:11:57,090
Which if you go to the documentation, for example, if you go to their farming samples here, it would

171
00:11:57,090 --> 00:12:00,060
actually be something more like maybe three to make this look nicer.

172
00:12:00,450 --> 00:12:01,810
So I can say and be three there.

173
00:12:02,520 --> 00:12:06,030
Save that, and let's just see if that looks a little nicer in our example.

174
00:12:06,720 --> 00:12:08,100
So I bring that in.

175
00:12:08,280 --> 00:12:09,600
And yeah, that looks nicer.

176
00:12:09,900 --> 00:12:13,860
Maybe we put this whole thing inside a div container, and that would actually kind of be like, call

177
00:12:13,860 --> 00:12:14,190
it a day.

178
00:12:14,520 --> 00:12:16,980
So we come back here and put this into entire form.

179
00:12:17,970 --> 00:12:19,230
Honestly, maybe the entire page.

180
00:12:19,230 --> 00:12:22,920
So we can say div class is equal to container.

181
00:12:24,520 --> 00:12:27,550
And then let's grab that form along with the for loop.

182
00:12:28,940 --> 00:12:32,720
Cut and paste it all in there, and that's looking pretty darn good.

183
00:12:33,320 --> 00:12:36,980
So we'll save that refresh and there is our form.

184
00:12:37,580 --> 00:12:37,970
OK.

185
00:12:38,000 --> 00:12:41,630
Not too shabby, given all the work and heavy lifting that Django was doing for us.

186
00:12:42,080 --> 00:12:45,560
So what did we learn in this particular lecture as we kind of finish up here?

187
00:12:46,310 --> 00:12:50,990
Well, we essentially learned you have three main options for rendering in the template.

188
00:12:51,560 --> 00:12:57,050
The last option that we went through is using a for loop to actually loop through every field and that

189
00:12:57,050 --> 00:13:03,530
we have kind of a lot of flexibility in the HTML code aspects, but you don't need to remember every

190
00:13:03,530 --> 00:13:05,490
single field or write it down manually.

191
00:13:05,510 --> 00:13:07,940
I don't need to say first name, last name, email review, etc..

192
00:13:08,120 --> 00:13:11,150
Now, if you did want to do that, that was always an option for you.

193
00:13:11,360 --> 00:13:17,690
Remember, the way to do that is by saying form dot the field name, such as first name and then you

194
00:13:17,690 --> 00:13:21,410
have label underscore tag for that particular field.

195
00:13:21,800 --> 00:13:26,170
And then if you just want the actual widget where you enter the information, the input, let's just

196
00:13:26,180 --> 00:13:27,980
form dot and then that field.

197
00:13:28,310 --> 00:13:35,180
So it's field and then field that label text, so form the field form dot field that label tag.

198
00:13:35,540 --> 00:13:36,590
So that was the other option.

199
00:13:36,920 --> 00:13:41,570
And then lastly, the very first option we could do, which is maybe the easiest is to say form.

200
00:13:41,840 --> 00:13:46,100
And then as p to rep paragraph tags around each label input combo.

201
00:13:46,970 --> 00:13:47,300
OK.

202
00:13:47,690 --> 00:13:52,220
So later on, we're going to discuss styling and a lot more detail because styling really has to do

203
00:13:52,220 --> 00:13:52,980
with the widgets.

204
00:13:53,000 --> 00:13:54,980
So this is really just about template rendering.

205
00:13:55,400 --> 00:13:55,760
OK.

206
00:13:56,150 --> 00:13:56,630
Thanks.

207
00:13:56,660 --> 00:13:57,950
And I'll see you in the next lecture.