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