Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: User input and HTML forms
Lecture: A little design for the register form
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now, it's great that we can click here and submit our form that we can type in here our little placeholder goes away
0:06
but this page does not encourage me to actually give my personal information away to whoever runs the site. It looks terrible.
0:13
So let's go and do the design real quick. So over here we're going to make this a little bit nicer
0:19
and we're going to start by just adding a class to this to be an account form like login or a register.
0:27
And the other thing we want to do is let's create a CSS file that's just for the account interaction. Go over here to start it, CSS.
0:39
Now do we want to include this on every single page? No, just on those, so let's go back to our shared layout real quick here
0:47
and at the top we've got this block right there. Remember how we added these blocks the pages can then inject stuff back into.
0:56
So that's what we have right here we're just going to use that. So what we need to do is get a style sheet type of thing going on here.
1:06
All right, now we have our account CSS file in there. Now all we have to do is go and put in our stuff. So we have form .accountform.
1:17
And let's just style the overall form itself. Let's add the margin top to be 50PX. What I want to do is create a little box
1:26
kind of floats in the center of the page. So what we can do is we can set the width and then we can set the left and right margins to be auto. Like so.
1:38
And let's see how it's looking now. Oh, we don't want to do that. We want to go here. All right, looking a little bit better
1:46
Ah, don't really want that up there. Ah at the...that way. So, let's wrap the form in this div here and I'm going to set the padding on that to be 50.
1:57
So it keeps the background color something funky goin on there and then we're going to set the top 350 in the margin, left right.
2:03
And let's set the background color of this one so we can see and I'll just set it to white but then let's use our little selector to gray that out
2:11
just ever so slightly til we get happy like right around there looks good. And then let's also set the border to be 1PX solid gray.
2:22
And border radius, we need 5PX. All right, let's see how it's coming along. Whoo, looks pretty good I feel like it could use some padding for sure.
2:37
All right that's better and then we want these to look a little bit better as well. So we can use some boot strap styles on that.
2:43
So we can come over here and each one of these can have a class form dash control and that's just a boot strap thing. Makes these look a little nicer
2:52
behave a little nicer, so we refresh that. Looking good, and then finally this should look like a proper button.
2:59
So this should be a btn and a btn-danger let's go with danger. Here we go, that's getting quite close I like the little glow these get
3:09
when we click in there. And our registers button, we want that over here we also want a little more spacing. So we can do that pretty easily.
3:16
Go, I'd like everything that is directly contained within here to have a margin top 5PX and a margin bottom be 5PX. Let's see how that looks.
3:33
Oooh looking pretty solid, maybe those weren't borders rounded edges probably that we want centered. Do a little bit more there.
3:46
That'll center this, and then let's push that to the right. Let's see if that does it Oh, close, close, but remember this is breaking out
4:04
so the last thing we've got to do is down here, have a div and say Style clear:both. How are we doing? Oh perfect, I think this is looking pretty good
4:16
in fact let's take away some of the padding on the top there, some of the margin. That one. Okay well, is it absolutely perfect
4:25
is it glorious? No, is it good enough for now? Sure, so here you can see our form is still working I can type stuff, uh
4:34
our form is doing pretty well at this point. I'm happy enough to call this done of course in a real site this is a super important part of your sites.
4:41
You may optimize it further, but I think our design is coming along pretty well.