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