Welcome back, everyone, to this lecture on jingo form, widgets and styling.
Recall that inside the actual forms, that pie form class, we have the form fields and those are all
connected to generating a single widget that in turn is actually what's rendering the HTML form input
and label text.
So if I wanted more specific control over styling and presentation of our actual form, we can access
the widget attributes.
This gives us a lot more detail level control on the Python side of things without again needing to
worry on the HTML template.
We're going to begin by linking a static files directory to hold our custom CSC files.
The general steps for this is to first actually create our static folder inside our application.
Then a sub directory again with the same application name and then create our CSV file.
Then we can load the static directory in the HTML template.
We'll link the static csv file within an ref and then we run migrate to load the new app in settings
about pie.
Let's check this all out and our editor.
All right, here we are back inside a visual studio code.
What I'm going to do is create that static file and then connect it to my actual HTML code.
So I'm going to open up my explorer here and underneath cars, just like I have templates, cars, I'm
going to create a new folder.
Call it static and then create a new folder.
Beyond that called cars, so it's a subdirectory, so goes cars, static cars just like you have cars,
templates, cars and inside this static cars folder is where I can then create a new file and call that
my custom CSV file.
OK, so we have our custom CSS.
And then what we're going to do is just create a very simple class here.
So we'll say my form and I'm going to have this be a border, so I have my form class.
This is going to be a border, and let's make this five pixels dashed red.
So it's really obvious that it's actually being stylized.
So then you have your customs scissors, but how do you actually link this static file to your HTML?
Well, you can just come to your HTML and let me collapse explorer now.
So come to your HTML and at the very top of it, you need to make the connection to load static with
curly braces, percent sign and then load space.
Static that essentially says that it's going to begin loading files from the static directory.
Keep in mind that static directory is also defined here in settings that pie.
So if you go to settings that pie in the same way that you have the installed apps configuration there,
that also needs to happen later on, we'll see that we need to run migrations so you connect the app
and then later on, that will actually connect.
Just like we have app directories or templates, you scroll all the way down and you actually see there's
a static URL.
There's more information here at this link how to static files but it's essentially a way to link things
like your CSIS, your JavaScript or your images.
OK, so that's how that's all being done automatically from the settings.
So once you load up your static, you can actually call files with static.
So the way that works is inside your HTML.
What we're going to do is just make a new CSIS reference link.
So I'm going to say, let me make a couple of spaces here inside the head.
A new link.
It'll be a style sheet.
And then my h ref is going to be inside curly braces here.
Percent signs, and then I'm going to say static.
And then, let's say cars forward slash custom, that CSIS.
OK, so this says look in the static directory and then load this up.
Similar to kind of connecting to a template with URL names.
So I have to load static and then I can call things like static passing the file name.
So now I should have linked my style sheets to make sure this is working.
Let's go ahead and pass in for this entire div that we have here.
The My Form class save those changes.
That should be kind of obvious if it actually worked or not, because we should see a giant dashed red
line there with a border to actually register the static file.
What to do is, say, python managed pie and then migrates.
I already actually ran migrations earlier before I recorded this.
So you will see a bunch of stuff come out, but I don't see anything, so I'm good to go there.
Let's now actually run the website.
So Python managed our pie run server.
And upon running that server, when you refresh your rental form, you should see this really obvious
red border around it.
OK, so we just discovered how to create our own static files and load them with static calls inside
each HTML.
Now we haven't actually explored widgets yet.
For example, what if I only wanted a red border around the email field?
How could I do that?
One way you could do it is manually inside the actual HTML code.
I could, instead of a for loop here, write out each individual field.
And then when I got to a particular field, I would make a div call and on that particular, they've
and in the class for my form.
However, we want to try to put most of the work on Django and Python instead of having kind of these
gargantuan HTML files that are harder to read sometimes.
So the way that works is you come to forms that pie and you can recall that each field has these arguments
you can pass in.
And one of the arguments is widget.
So if you check out the documentation on form fields, so if you just Google, search Django Docs,
form fields and you come to form fields, eventually you realize that each of the form fields have core
field arguments, such as label or whether or not that field is required or the widget.
So each particular field comes with a widget, and that's actually an argument.
There's the default widgets, but we can see that some of them sometimes don't make sense for what we're
looking for, such as Please write your review here.
The text input widget probably isn't so great, because if I want to put a paragraph of information
here, eventually I'm starting to run out of space and I don't get something nice.
Well, it's probably better as a text area input, and that's done through the widget, so you can click
here to see the widgets that are available for you.
So then when you go to the widgets section of the documentation, you get to see all the built in widgets,
there's text input, no input, email input, there's text area, selection boxes, multiple billions,
file inputs, calendars, etc. So tons of stuff.
And what I'm going to do is check up text area.
So I can see here this will actually generate a text area for us, which means I can override this by
just creating a text area inside the widgets.
So let's come back here.
I see Form's character field.
I'm going to add in a new argument here, which will be widget, and then I'm going to assign that widget
and let me enter here just to get a little more space for readability.
OK.
So I have widget and it's going to be equal to.
A text area from forms, so we simply say which is equal to forms dot and then the name of that particular
widget like text area, open close parentheses there safe that.
And you should now see when you refresh your rental review form.
Refresh that.
This is now a text area here.
OK, so so far, so good.
We were able to change this to a text area that makes it a lot more sense for writing a review.
Technically speaking, you could overwrite the default widgets for any of these attributes, but often
the default ones make a lot of sense.
Makes a lot of sense that your email field should be connected to an email input widget.
But of course, it's up to you.
You have full control.
So then the question came up on how to actually style just, for example, this text area widget.
I don't want to actually add styling to the entire form.
Well, the way you do that is inside the widget forms that text area.
You can add in attributes or 8T, RSS and the attributes argument is itself a dictionary where you can
begin to actually grab attributes that are common for each HTML.
For example, the class call.
So the way this would work, as you would say, OK, class and assign that to.
My form, so note what I just did here, I basically said, OK, on this particular widget when you
actually began rendering that into HTML, I want that widgets attribute to have the my form class upon
rendering.
Keep in mind, you have to do this inside the widget.
You can't unfortunately do this inside the field itself.
So if you want it to add in my form class for email, you would have to again assign widget is equal
to forms that email widget and then set the attributes there.
OK.
So to show that this is working, I'm going to come back to Rentoul, review the HTML, and I'm going
to get rid of my form on the container.
So, no, now nowhere in the actual HTML file am I calling the my form class that was this custom border
here that doesn't appear anywhere in the HTML.
It only appears inside the attribute call inside of my widget inside my field.
So when you save that and refresh your rental form, you should now see that CSS styling only occurring
on that particular field or widget.
So again, we now have that widget and we can directly see how it's going to be translated into an HTML.
You can see why those attributes are there.
And so then you can begin adding a lot more attributes that are directly related to any particular widget.
For example, later on, you could look up what attributes are available for a text area tag, for example,
you come to W3 school or any other resource like that and see, OK, I have attributes of like rows
and columns I can pass in to make this square a different size than the default text area size here.
So how do I do that?
I would just come here to attributes, and I'm basically defining attributes on an HTML level, but
inside Python, so I could say something like Rose.
And let's have the speaker to use like two rows.
And then let's say columns and have that be two columns.
So, no, I'm just adding in more attributes into the attributes dictionary here.
So save those changes, and those should probably be extreme enough that you would see the difference
even if you're superhuman, like I am.
I can see here it's only now default two by two.
So notice now how much skinnier it is.
OK, so pretty much all those attributes you can pass in to an HTML tag.
So, for example, here I can see an HTML text area tag, which is from the text area widget, just
to really zoom in here.
I can see a bunch of attributes like ID or name or rows or columns or class, etc. All those things
you can pass in as a dictionary, call inside as attributes and then give them whatever value you're
interested in.
And that is done through the widget.
And then each field has a default widget they're connected to.
And the one caveat being, you can't just pass in an attributes dictionary here in the fields.
Unfortunately, you would need to actually manually call the widget reconnected, even if it's the same
as the default widget and then pass the attributes.
But that allows you to then do styling on the Python side of things and keep your HTML code clear.
And we always want to try to keep these HTML forms as clean as possible because they can get really
hard to read quite quickly versus Django tries to keep things a little more readable, especially if
you're more comfortable.
If Python that HTML, of course, depends on the person on where they want to do the styling.
Technically, everything we did here could have been also done on HTML.
Just would have been where you want to separate out the work.
OK.
That's it for this lecture.
Coming up next, we're going to discuss using model forms.
I'll see you there.