Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Buttons and forms in action
0:00 Let's open up our project again
0:02 and now we're going to create some kind of login form
0:04 using all the Bootstrap things.
0:06 We're going to use the stuff to style forms in Bootstrap
0:09 and the stuff to create buttons, of course
0:11 to submit those forms and navigate around.
0:14 So, just go over here and create a new HTML file
0:17 call it buttons, here we go.
0:20 Now, let's just go and make a little room here
0:22 and we're going to have a form, and in the form
0:24 it's going to have an action that posts back to this page
0:26 so that's going to be fine, and the method will be post.
0:31 In our little form here, let's have a couple of inputs.
0:34 One of type = texts, we could set the name
0:36 to be email, so it'll get submitted back
0:39 and let's do another input, type password
0:44 the name, you guessed it, password, like that.
0:49 And let's have a button here and on the button
0:52 I'm going to have type = submit and the message will be login
0:58 but also maybe if you don't have an account
1:00 we'll just have a button that says, or hyperlink
1:02 for the moment, that says register.
1:04 So, we'll call this register.html
1:06 we can make that in a second, and this'll just be
1:09 register, create an account, you know, whatever.
1:12 Let's really quickly create that.
1:25 We won't do anything with it, but just so it works
1:27 when we navigate over to it.
1:29 Let's see this beautiful site that we've created
1:31 how are we doing here?
1:33 Oh, that's good looking, isn't it?
1:35 Well, I guess it's good looking for 1995
1:38 but no, it is not.
1:41 However, our form is in place
1:43 and we can submit it, you see the little flicker
1:44 right there, or we could go over and register.
1:47 So, it's kind of working.
1:48 I don't know what those are, right
1:50 maybe that's an email, username, I don't know
1:52 something like that.
1:53 So, let's do a little more work here
1:54 say a placeholder, this is going to be email
1:58 we'll do a placeholder and this'll be password
2:01 and then let's make them both required.
2:05 Here we go, that looks a little bit better
2:06 when we try to submit it, say that it's logged in
2:08 and we could even do one better here
2:10 instead of being type text, this could be type email.
2:14 So now, if we just put stuff in there
2:16 it'll say no, no, no, that's not an email address.
2:20 Super, okay, well it looks terrible.
2:22 Let's make it look better with Bootstrap.
2:24 So, the first thing that we're going to do
2:26 is we just have to include Bootstrap in our page.
2:29 Now, normally this would happen, kind of
2:32 automatically in Flask, right?
2:33 We would just be using our common layout theme
2:35 and we'd wrap up our little content in that
2:38 so this would happen automatically
2:39 but for this one, we've got to do this
2:41 and just doing that, let's have a quick look
2:43 and see how it looks now.
2:45 Well, maybe without the thing.
2:47 So, it already looks better, you know
2:49 there's still more to do, it doesn't look
2:51 like a Bootstrap form, these aren't buttons
2:52 from Bootstrap but it does look a tiny bit better.
2:55 Let's add just a little bit of style here
2:57 we would normally put this in a style sheet
2:59 but I'll just put it in a style tag
3:00 just so it's all together and simple right here
3:02 for this super simple example.
3:04 So, let's go to our inputs and say that they have
3:08 a margin of 10px.
3:12 Here we go, that looks a little better.
3:14 And then, let's say that we have a form
3:18 and the form has padding of 20px.
3:22 Still looking kind of boring, but a little bit better.
3:26 The last thing to do, let's focus on the buttons.
3:28 Right, that's the primary part of this
3:29 what we're trying to focus on right now.
3:31 So, we have two things here.
3:32 Like I said, they haven't taken on any Bootstrap styles
3:35 cause we need to add certain classes to them.
3:39 So, in order to get this to work, we need to say
3:41 that this has a class of btn.
3:44 Now, Bootstrap likes to have these, sort of
3:46 category and then modifier classes
3:48 so we would say btn, and then what kind of button
3:52 btn- we could have danger, we could have dark
3:55 we could have success, we could have primary
3:58 things like that, okay?
4:00 So, let's go with success here, and just see what happens.
4:04 Do a quick little refresh, ooh.
4:06 That's looking a lot nicer.
4:07 It's a little bit bigger than the form
4:09 so we can also form input, so we can say
4:11 it's a small button.
4:14 It's not perfect either, but I feel like
4:15 that's slightly better.
4:16 And we also have this one, so this is actually
4:19 an HTML button, right, this one is a hyperlink.
4:22 But it doesn't matter, we can apply the same
4:24 basic class to it.
4:28 But instead of doing success, let's say this one
4:30 is danger, now, we don't really mean danger
4:33 but it makes it red, and red tends to convert well
4:36 or get attention, or so on.
4:37 So, here you go, just as simple as that
4:39 we have a true button that submits the form
4:41 or attempts to submit the form
4:43 and then one that's also a hyperlink
4:45 that just navigates us away.