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