Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: User input and HTML forms
Lecture: The basics of HTML input

Learn more about this course
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.