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.

Talk Python's Mastodon Michael Kennedy's Mastodon