#100DaysOfWeb in Python Transcripts
Chapter: Days 5-8: HTML and HTML5
Lecture: Describing form elements
0:00 Here's our signup form. Fill it out. What goes where?
0:03 Obviously, we have no idea what goes where.
0:06 One option would be to put a little label left of
0:09 these things like full name
0:12 and email and password and
0:15 stuff like that.
0:16 We could even style those to be fixed sizes.
0:18 Ah, that works. Is it clever? Is it beautiful?
0:21 Is it smooth?
0:22 Does it beg me to type in my stuff and register and
0:25 give away my personal information.
0:27 No, not so much.
0:29 So let's go here and do a little better job.
0:30 So we can add a place holder.
0:33 Here we can type full name, maybe lower case
0:36 or something like that.
0:38 Here we have a place holder for email.
0:41 Here we have a place holder for password.
0:43 If we put a little space at the beginning
0:45 it kind of centers it a little bit more.
0:48 Ah, that's better.
0:49 Now if you go here and you type your name
0:51 obviously it goes away but if there's nothing in there
0:53 comes back, right?
0:54 So, nice little place holder. Put a very secure password.
1:00 Maybe not the best type here.
1:01 We might want to hide that away but you can see
1:05 we're now passing that information along.
1:07 Little bit nicer.
1:08 Okay, well that was good.
1:09 Having those place holders there was good.
1:11 The other thing that we probably care about is
1:14 maybe we want to hear about how and where they
1:17 heard about our company.
1:19 Like, "Hey I heard about you through search or
1:21 through a friend" or "Oh, that newsletter you guys gave out
1:23 that's how I heard about your new product."
1:26 So, what we want to do is go in here and
1:27 put some kind of a drop down.
1:29 And the way drop downs work in html is these
1:31 are called select boxes and the name, let's
1:35 heard of, heard of like that. An id doesn't actually matter.
1:41 And inside here, we're going to put options.
1:45 These are options you can pick and the value of
1:47 nothing from it.
1:49 We'll say please select an option.
1:55 And then we can say something like podcast.
1:59 And this will be your podcast.
2:02 And down here, what else are we going to have?
2:03 We're going to have search, search engine
2:07 something like that.
2:09 Notice the tech doesn't have to be the same.
2:10 Friends recommendation and this can
2:14 just be friend for the value.
2:18 Let's say that, it's you know actually spelled okay.
2:21 So this is all good.
2:22 This one we want to leave empty so it'll indicate
2:24 nothing has been selected.
2:25 And this one we could also just say selected like that.
2:29 So if we refresh again, just now we have please
2:31 select an option and those are our other ones we've picked.
2:35 'Kay so if we click it now, you can see
2:36 heard of is now a podcast.
2:38 If we change it to friend, it's now friend and son.
2:43 Okay well this is pretty good.
2:44 Looks like we have a nice little self-describing forum
2:48 that looks really slick.
2:49 When we refresh it, it's going to come out
2:51 looking like this. Looks nice to me.