Building data-driven web apps with Pyramid and SQLAlchemy Transcripts
Chapter: User input and HTML forms
Lecture: The basics of HTML input
0:00 In the next two chapters
0:01 we're going to talk about accepting user input from the web.
0:05 And, primarily, this is going to be around
0:07 creating HTML input forms and submitting those back.
0:10 We'll talk about validation
0:11 both client and server side
0:13 that's the next chapter
0:14 as well as some design patterns
0:16 that make this really sweet in Pyramid
0:18 or, honestly, any server-side web framework.
0:23 But let's start with a super quick review
0:25 of just what is an HTML form
0:27 and what are its key elements.
0:30 They have an action and a method.
0:32 Here our form action is empty.
0:34 And it might look like that means
0:36 like it doesn't do anything.
0:37 In fact, this is probably the most common action
0:40 and that is to submit the form back
0:42 to whatever URL you are on.
0:44 And this has some advantages.
0:46 It means you stay on the same page
0:49 until the form is submitted correctly.
0:50 So, if they filled out something
0:52 you can say, "Hey, you forgot to fill this out on the page."
0:55 That's great.
0:56 The other one is it also submits additional information
0:59 that might be carried in the URL.
1:00 Rather than just the route, it could also
1:03 carry over like query string parameters and stuff.
1:05 So, we're going to, in this form
1:07 submit it back to the same page
1:09 for processing or the same action method, really.
1:12 And then, it has an HTTP verb for the method.
1:16 And, the majority of these, are POST.
1:18 This is really important
1:19 because post is treated differently.
1:21 This means it can't be cached.
1:23 It means that it won't become stale.
1:25 Accidentally submit it twice
1:27 you get like a browser warning for things like that.
1:30 Then we have various forms of input.
1:33 So, we have an input, maybe, a text.
1:36 We're going to put email addresses in there.
1:38 We have a password.
1:39 And you can see, we're actually pre-filling that
1:41 with the email address if email address has a value.
1:44 Right, so, if we're loading up a page
1:47 and we already have information about them on the server
1:50 we can pre-populate these fields.
1:51 Those will have a password.
1:53 And, of course, the password doesn't show.
1:55 It has little stars or dots.
1:57 Right, so, these inputs have a type, optionally, a value.
1:59 I really like to put placeholders on them, as well
2:02 rather than labels, so people can see really concisely
2:05 what they're supposed to type.
2:06 And, finally, you need a way to submit the form.
2:10 but more likely, there's some kind of button.
2:12 So, we're going to have a button
2:13 and its type is going to be "submit."
2:15 That just tells the browser
2:16 when I click this button, submit the form.
2:19 And that's it.
2:20 This is a pretty standard HTML form.
2:22 We'll kind of take this basic construct
2:23 and build a bunch of cool design patterns
2:26 and the operations around it.