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
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.