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