Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: User input and HTML forms
Lecture: A little design for the register form

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 For this design let's go and quickly create
0:01 a new CSS file for the account stuff.
0:06 So we can use this for just all the registration forms
0:09 registrer, login, things like that.
0:10 Maybe even reset password.
0:12 So I have an account form type here.
0:17 And this is going to be a form that has
0:19 an account type, an account-form class on it.
0:23 And let's just do a couple of things.
0:25 Let's, the margin on the top to be 50.
0:31 We're going to make it sort of stand out off the page
0:33 right in the center.
0:34 And the way we do that is say margin left is auto
0:38 margin right is auto, width 500px, background
0:46 Color, let's pick it to be white.
0:50 Color is black.
0:51 Maybe not fully black.
0:54 Corner is 1px smaller and gray.
0:57 And border radius 5px.
1:00 Okay, so two things to make this work
1:02 one we have to put this class on our form.
1:07 Two we have to include it.
1:08 So if you remember, when we talked about our shared layout
1:12 way down at the bottom, we have this additional slot
1:15 right there. So let's us that to inject right here
1:22 this extra bit of info.
1:24 We're going to fill that slot, oh, and I want the one
1:27 at the bottom, excuse me.
1:29 We want this one at the top, additional CSS.
1:34 And we'll do it like so.
1:36 Alright, let's see how this is working
1:38 let's go refresh our page. Boom!
1:41 We're actually doing okay.
1:42 Let's put our register H1 maybe inside the form as well.
1:48 A little bit closer.
1:49 So it's getting there but still not entirely amazing.
1:53 Let's do a little bit more on our CSS.
1:57 For H1 we'll say text to line is center.
2:00 That's now working. Good.
2:02 Actually, this background color white being there
2:06 let's go and change the background color
2:09 a little bit. Make it DDD.
2:12 Okay, that stands out a little bit.
2:13 It's not going to be super good looking
2:15 but it's good enough.
2:16 And then let's go and tell it that actually these
2:19 have some classes.
2:21 Form-control, and they all have form-control.
2:25 Remember boot strap.
2:27 That'll make them wrap like this, hmm!
2:30 Not so much. Let's set their width.
2:43 Alright so I told it to align center
2:46 and we've just set some limits here.
2:48 And let's just set some margin on the top and bottom
2:51 of 10px each. Ah, we'll go for five, that seems extreme there.
3:00 Okay, pretty good. And then we need our button on the right.
3:08 That looks pretty good.
3:09 We could do a little bit more but close enough.
3:12 In fact we could apply that more easily
3:14 to all the stuff in here I suppose if we wanted.
3:19 Everything immediately contained within here.
3:21 Get to that. Here we go, better.
3:24 Okay, so I think we're close.
3:26 You can see our inputs and so on.
3:28 But we also have this register button here
3:32 but it doesn't look like a button does it?
3:33 So the last thing will be to give it a class
3:35 of btn btn-success. Awesome!
3:40 Awesome! So I think our little form is all set.
3:44 And that'll allow us really quickly to do
3:46 our login form as well.
3:48 And the HTML, all we got to do is have a form
3:51 with that class, put our stuff in there, boom!
3:53 And it'll look like that.
3:54 So all of our account forms can look like this
3:56 if we want. Or you know, you style yours like you like.
3:59 With this in place we're ready to write this code
4:02 that actually processes the response.