Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Buttons and forms
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Another really visible aspect of Bootstrap
0:02
are buttons and, related to that, forms.
0:04
So let's take a look at them.
0:06
Here's Wistia, the sign-up form
0:08
where you can create your account on Wistia.
0:10
Now Wistia is a video hosting company.
0:12
I don't really use them for anything
0:14
but they're a pretty cool company
0:16
and it's a decent login page.
0:17
It's kind of nicely styled and somewhat unique.
0:20
And notice, there are a couple of buttons here.
0:22
We have a button down at the bottom
0:24
which is going to submit the form in html.
0:26
That's actually a button in html
0:28
as in angle bracket button.
0:30
Probably has type equal to submit
0:33
or something like that.
0:34
So this is actually a button
0:35
that html itself knows will submit the form.
0:37
Up here, we also have a button.
0:39
But that's not actually a button.
0:41
It's just a hyperlink.
0:42
These could look exactly the same.
0:44
Or they could be slightly different like they are here.
0:46
But the idea is we have this concept of a button.
0:49
I click on this big thing
0:50
and it does button-like stuff.
0:52
It does some action.
0:53
Whether or not that's buttons or links in html
0:56
doesn't really matter.
0:57
My rule of thumb is
0:58
it's a button if submits a form
1:00
otherwise it's a link.
1:01
That's pretty much the way it goes.
1:03
But the visual aspect and the conceptual aspect
1:05
of a button and whether or not
1:06
it's actually a button or a hyperlink in html
1:08
those are separate.
1:09
And Bootstrap lets us easily style
1:11
both hyperlinks and buttons in this way.