Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: User input and HTML forms
Lecture: The basics of HTML input
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
The next two chapters are all about accepting
0:02
input from the internet, mostly from users
0:06
letting them submit forms.
0:08
In this first chapter we're going to focus on
0:09
just creating HTML constructs and working with Flask
0:13
to do that data exchange.
0:14
And then in the next one we're going to talk about
0:16
input validation, the internet is a dangerous place.
0:20
We've got to make sure everything's validated
0:21
either because people make mistakes
0:23
or because somebody's trying to maliciously do something.
0:26
So we're talking about validation
0:27
both on the client's side and server side
0:29
and some really sweet design patterns
0:32
that are going to take the code that we write here
0:34
that kind of clutters up what we're doing
0:36
and put it into a super nice, testable little package.
0:40
Not Python package, just conceptually package
0:42
that we can work with that will clean up our code
0:45
around data exchange with HTML forms.
0:48
So let's begin with a super quick review of the actual
0:52
HTML that we got it right
0:53
in order to do this data exchange.
0:56
So we're going to look at the basics of an HTML form
0:59
and the various contents that go in here.
1:00
So you can see on the screen we have a form
1:02
a form has an action and it has a method.
1:05
An action here might look like it doesn't do anything
1:08
but in fact this is the most common action.
1:10
All it means is the URL you're going to submit this back to
1:13
is the page that you're currently on.
1:15
So we're going to be on a page
1:16
we're going to make some changes
1:17
submit it back to that page
1:19
and potentially do something with that.
1:21
So we can also have other information here
1:23
we could pass along to another URL
1:26
we could have query strings, all sorts of stuff.
1:28
But for now we're just going to submit back to this page
1:31
and we're going to do this with the HTTP verb POST.
1:34
We could do a GET, we could do other things
1:36
but almost always what you want is a POST.
1:39
And that's because the HTTP protocol treats POST special.
1:43
It knows that it cannot be cached
1:46
and that your browser warns you if you try to resubmit it.
1:48
If you've ever tried to refresh a page that's done
1:50
in HTTP POST, it'll warn you like
1:52
Hey, we're going to resubmit this form
1:54
are you sure you want to do that?
1:55
You might buy this thing twice
1:56
or sign up twice, or whatever.
1:58
So POST is almost always what we want here.
2:01
And then we're going to have some input elements.
2:03
Here you can see we have an input element of type text
2:06
that's going to be our email address.
2:07
And we have an input type of password
2:11
so we're going to let people type in their email address
2:13
type in their password, and then sign in, right?
2:15
Like, this is some kind of login form here.
2:18
We also have an error message thing
2:20
we're going to show some kind of error.
2:22
They say, fail to login, right?
2:24
Like, they try to sign in but their username and password
2:27
are a mismatch, or the account doesn't exist
2:29
we can show that in that error field.
2:30
But that's technically outside of the form here.
2:33
So these input elements, they have a type
2:36
like text or password, or even email, which we'll use later.
2:39
And optionally, some kind of value.
2:42
So here, we're passing along a value
2:44
like email_address and password
2:46
but they might be empty so then
2:47
the text box will just be empty.
2:50
And importantly, they have a name.
2:52
That name that's set is actually
2:53
what you use to get it back out on the server side.
2:57
So this is a super basic form, really.
2:59
This is all the HTML that we need
3:01
to create a super nice, interactive login form.
3:05
We don't need Javascript, we don't need Angular JS
3:08
we don't need any of that stuff.
3:09
Just this and a little bit of logic on the server side
3:11
and we'll have something super nice.