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.