HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Adding the form to the template
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
I'm going to start with a template first, then add the code afterwards. As the form goes on the category page, that means editing category.html.
0:20
I'm not going to make you watch me type out the whole thing. I'll just paste it from a pre-prepared buffer.
0:27
If you're not a Bootstrap person, the first three lines here look kinda messy.
0:32
Bootstrap has a grid-based layout system, and these three lines are establishing where
0:37
the grid goes on the page, and then where the form ends up in the grid. The grid is 12 columns wide.
0:45
I'm making the form 4 columns wide, and putting it in the middle of the grid.
0:53
The form itself has some fancy class stuff to make it a little more pretty.
0:58
And if you're wondering why I'm not using a form object to render, it's because I've got extra styling here from Bootstrap.
1:05
Yes, there are ways of doing that in Django, but I prefer to show you exactly what's going on in the HTML instead.
1:13
The post URL for the form is being looked up using Django's URL tag, and is going to the already existing view for the category page.
1:22
I'll add the post handling to that view in a moment. Inside the form, I've got four input tags, each styled with Bootstrap's form control class,
1:33
'cause base HTML is ugly. And of course, at the bottom here, a button to submit the form. That's the form. Let's go modify the view.