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.

Talk Python's Mastodon Michael Kennedy's Mastodon