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
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.
