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