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