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


Talk Python's Mastodon Michael Kennedy's Mastodon