#100DaysOfWeb in Python Transcripts
Chapter: Days 5-8: HTML and HTML5
Lecture: Form basics
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We've seen the basics of all the HTML tags and we even talked a little bit about forms but let's build something quite a bit better
0:09
around accepting user input and giving validation and those sorts of things. So over in our GitHub repo, we now have a signup folder.
0:17
Let's open that in WebStorm. Anyhow, you can see we have a really simple site. It has just a little bit of styles already set up.
0:26
So here if you see if I refresh it we have this big blue screen. Let's see what that's for in a minute. So we've got a few styles sheets
0:33
because earlier we recreated Yahoo from 1996 and that was cool but if you build something that looks like it's from 1996 today?
0:42
Not cool. Don't do that. So I threw a few basic styles in here to style some forms and stuff. It doesn't change anything about what we're doing
0:50
but at least it makes it look and feel better. Also I threw in a little bit of JavaScript here that will capture the form input that we type
0:58
and show it back to us as if we had submitted to the server. All we have here is an index.html file. There's no server.
1:05
We haven't got to the server side frameworks yet. This is going to simulate submitting it back to the server.
1:11
Now our goal here is to define some basic HTML forms that allow users to input data or interact with the data from our website. So as we saw before
1:21
what we're going to do is we're going to have a form element here and often an empty action is fine. That means post back to the same page.
1:28
The request method is going to be post. And in here, we want to have something to sign up. So let's actually put a little header here
1:36
so it's a little more obvious. We're creating this fake startup that we're calling Foxrem. So you're going to be able to sign
1:42
into our cool site at Foxrem. If we come over here and refresh it we now have a form and we have our ability to sign up for Foxrem.
1:52
There's no input elements in our form. It just had a white background. So what we need to do is accept a full name
1:58
an email address, and have a button that they can click. So let's have an input of type equals text. And we'll have another input
2:07
type equals text, and I'll have a button. We'll set the type equal to submit and we'll call this register. Let's see how we're doing now. Better.
2:17
Here I guess that's full name. And I guess, what is it? This is email that we can register. And if I click this
2:26
notice what we're sending to the server is empty. Why is that? Well, in order to send this data we actually have to give it a name.
2:35
Not an id, not a class, but just a straight up name. So this is going to be full name, something like that.
2:42
And this one's going to have a name of email. Now if we go back and restore oh it must have remembered this is who I am.
2:49
Sure, let's go and try to submit that. Registering, see now the full name is Michael Kennedy. The email is michael@talkpython.fm.
2:56
Super. So this is already working. It's already coming along. So if I refresh it though, I got to make it forget somehow. If it looks like this
3:05
as we really get to it in the beginning it's not at all easy to tell what this is for. Well, sign up and this says register.
3:12
This probably has something to do with like a username or an email or maybe a first name. Maybe this is password.
3:18
I don't know, but we can't tell, right? So we're going to do a little bit more work to make it look nice. And speaking of which
3:25
we also do want to have a password section here. All right, so which one of those is the password? I don't know.
3:32
So we're going to go and add a couple of extra features to our form to make it really clear what we want to put in and also to do some validation.