Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Buttons and forms in action
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
The next thing we want to do is create a form with a button. Maybe some hyperlinks with buttons as well.
0:06
So we'll just create a new HTML page here called "Buttons." So we'll start by Bootstrappifying this.
0:14
Of course this goes in your standard and layout page and your normal pages don't have to to this, it just falls into place.
0:20
But for these little one-offs, it has to be done separately. So let's imagine over here that we have a form. Its action is just going to be nothing.
0:29
We'll just leave it like that for the minute. And its method equals POST. And in here, we want to have maybe something for your email and your password
0:39
and let's say it's login, okay? So, we'll come in here and we'll have an input, type equals text and we'll say placeholder equals email
0:50
we'll say it's required. That's decent. Actually, let's hold off on this just for a second. Let's see it in its raw form here.
0:59
And let's have another input. Make that password, placeholder that's password also required. And let's have a button, and I'll type equals
1:14
submit and I'll say login. And maybe next to this button we want to have a hyperlink. Where for some reason, if you don't have an account
1:26
we can take you over to the register. Okay, if we open that up it looks very bad, very bad. That looks super old school, doesn't it?
1:39
And of course it's going to look slightly different in the different browsers. So here's our email, here's our password.
1:46
The placeholders things are working. The required thing is working. Register works, but of course there's no file there.
1:54
So kind of working, but let's make this look better, right? Actually, one of our goals is to make register also a button, look like login.
2:02
I'm not sure about really the semantics of putting it like that, but just for an example. So let's start by saying how does it look
2:09
if we just put Bootstrap. Looks a little bit better, right? The general text input looks better and so on.
2:18
Let's go down here and just put a little style on this so you can see it. Of course, this would go in CSS, but just
2:23
for the demo, I'm going to just cram this on here. Let's put it at least in the style section that'll make me feel better.
2:34
So we'll give the forms a little bit of padding to push it away from the edge. Let's also do this, let's say width is 500px.
2:42
I'll say that in just a minute. We're going to make it look a little bit better but let's build it up here.
2:47
So now we've got the margin is 10 on the input and so hopefully that looks a little bit better. Let's try, woo, it's not amazing, it's
2:55
nowhere near amazing, but it is better. So what can we do with Bootstrap? Well, let's focus on our buttons since that's where we started.
3:02
I want that to be a button, and that to be a button and I want 'em to look pretty much the same. So in Bootstrap, a lot of this stuff is done
3:09
with classes, so we'll come down here and say that first of all I want to treat this like a button so I'll say btn, and then what kind of button?
3:19
There's themes that have different styles. Is it like a successful thing is it a possibly dangerous thing? So you say btn either success or danger
3:29
or default or primary, let's go with primary. And then we'll do the same thing so this is our button in HTML
3:37
and here's our hyperlink, we'll do the same thing here. That one's going to be a successful operation. We want to encourage them to register, right?
3:49
Refresh, boom, look at that. That's pretty sweet, right? This one submits the form, this one navigates away
3:56
somewhere we don't have existing, but whatever. You can see these are working well. And that's pretty much it for buttons.
4:03
You can have small buttons, large buttons different colors, I'll show you a little template layout
4:07
or a table of those and what they look like in a second. And let's go ahead and round out how these things look, right?
4:13
They kind of look a little bit boring. We can do better. So over here, we can say a class is a form-control
4:24
and sometimes this goes farther than you like. It's slightly mobile focused, it trends towards focusing on mobile, so you'll see
4:32
in a second, look at that. Well, it's like okay that would be great that would look super on a screen like this, right?
4:40
But the way it is right now, not so much. Let's do a little bit of help on this thing. Let's go put a little class on this
4:55
and just say text-align is center. Here we go, that looks a little bit better. So this is okay, I like the styles, the rounded edge
5:04
everything looks good, but I do have this zoomed, right? There's a non-zoom version. Whoops. So pretty decent, but when it looks like this
5:14
not so much, what can we do here? Let's go and we'll put into our form here a login, that looks a little bit better. And maybe we'll even
5:30
throw our center on there as well. Let's do one little quick thing to make this look decent, I'm going to go
5:34
to the form, I'm going to set its max width to be 500px, eh, 450, 450. And then if we set the margin on the left and right to be auto
5:52
it'll just center that. And let's go ahead and say background color we can even pick, oh it's over here in PyCharm. Let's just create a little border
6:05
be it solid gray, I don't really want gray. I just want to pick a color like that. Okay, how 'about that, pretty decent.
6:14
We need a little bit more, maybe put 10 here. Say margin top is 50px.
6:31
And I've noticed for some reason, periodically that if you look at this, these extend too far to the right by 10 pixels, so we'll just push them
6:39
back maybe a little bit more, 30, rather, instead of 20. There we go, so here's our nice little login form and it's looking really great.
6:46
We've got our buttons by just having btn and then btn-style, right? Primary, success, etc. and we threw
6:54
in some form control to make that look good as well. If you head over to the training site, you'll see that stuff in action all over the place.
7:01
There's a button, go to login, there's your login. Here's your reset password. If you want to register, there's your register.
7:12
Little CAPTCHA, 'cause people been trying to hack into it. And so on, go to these course details and we have still more buttons all over the place.
7:23
This one is a hyperlink, this one actually submits a form, for example.