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