[MUSIC]

We have a lot of ways for users to input data but

we could certainly do more to organize our forms.

In this video we'll learn about fieldsets, legends and labels.

In the previous two videos we started creating a form and

we're gonna build upon that here.

So, let's switch over to our text editor.

And one thing you may have noticed about our form

is that we don't really have labels on a whole lot of things.

For example, the username and password are completely unlabeled.

So if you came to that form without knowing about the form,

it would be pretty confusing.

So it's good to always have labels assigned to your elements.

So, to start out, we're going to actually just break up our form

into two separate sections so that it's a little bit easier for the users to digest.

So to do that were going to use the fieldset element.

So we'll open that there and lets go ahead and

close it just after our favorite foods here.

So, close the fieldset there and then indent all of our elements there.

And then just after the opening of our fieldset, we'll go ahead and

create a legend tag.

And we'll close the legend here.

And, inside of our legend, we'll say Important Information.

We'll save that out.

Switch back and refresh, and

we now have this really nifty box around our Important Information.

So, we should probably create another fieldset down here for the optional items.

So, we'll go ahead and

just copy a little bit of the beginning of our fieldset here with the legend.

And just after our text area here, we'll throw in our fieldset.

And then we want to close this right before the submit button.

So we'll close our fieldset here.

And then let's indent everything so it's in line with the legend, and

in line with the fieldset.

We'll save that and let's actually go ahead and

change this label to say Optional Items.

And if we refresh the browser that's what we've got.

Now, we can go ahead and

actually center these legends to the center of our fieldsets if we want.

To do that, you can go ahead and use the align attribute, and

set it to center on the legend.

So if we refresh the page,

you can see that our Optional Item's label is now centered.

Next, we need to add labels to each one of our form elements.

So let's go ahead and do that, starting with the username text input.

To add a label, we just need to add a label tag, just like that.

And we'll go ahead and close the label tag.

And inside of it we'll say, Username.

Now, how are we going to know which form element this label is associated with?

Well, we're going to add a for attribute, and we're gonna call it username.

Now, you would think that this would be associated with a name, but

it's actually not.

We need to add an id attribute to this input.

And we'll just set it to the same name of username.

And that will associate this label with this form element.

So, if we save that, switch back and refresh.

You can see that we now have a Username next to this form element.

The neat thing about this is that when we associate it with an ID we can actually

click on the label Username and it will focus into the form field automatically.

So let's go ahead and add the rest of these labels.

I'll copy this here and paste it just above our Password.

[BLANK_AUDIO]

And of course we need to add the id of password.

And then we need to add a few labels for our radio buttons and for our check boxes.

So let's just paste this right in here, and that said, Male.

And then, of course we need to add id.

And we'll change the for attribute just like that.

Change the id of female.

And then add a label around it.

[BLANK_AUDIO]

And then change the for label

[BLANK_AUDIO]

And I'm going to just cheat a little bit and actually copy and

paste from off screen to get the rest of these check boxes in.

[BLANK_AUDIO]

So you get the idea, the for attribute needs to match up with the id

attribute of these check boxes to match up with this label.

And then we should probably add a label for our text area and for our select here.

So let's do that, add a label for our essay and we'll add the id essay.

[BLANK_AUDIO]

And we need to go ahead and close this, of course.

And we'll say something more friendly like,

We want to know more about you, with a line break.

Write a short essay about yourself.

[BLANK_AUDIO]

So we'll save that.

And then finally we'll add a label for our select.

So add the label, and we'll say for continents,

close the label, and say, Where are you from?

And, we'll add a line break after that.

And then on our select, we should probably have a name on there so,

let's go ahead and add that in now.

And then we need to have an id for it to match up with the label.

So we'll add that in.

And when we save and refresh the page, it looks like we have

a couple of errors going on here, but we can go ahead and fix those.

For the most part, when you click on these labels,

they should actually select the item you would expect them to.

So let's go ahead and see what's going on with this markup here.

We'll scroll up and

it looks like we actually may have pasted in something twice here.

So we'll just get rid of this here.

[BLANK_AUDIO]

Save that out and refresh.

And there we go.

Now, here we have another issue with the text area.

And we need to actually just add in a line break there, right after our label.

So after our label, add in a line break.

Refresh the page.

And now we just have that nice label at the top.

And our text area.

So again, you can click on the label and

it will focus on the appropriate form element.

Pretty nifty.

Now, it looks like our select element wasn't focusing.

That's because our for attribute and id were not the same.

It was continent instead of continents, so if we refresh, that looks correct now.

We can click on that label and the select will be selected.

And one last thing I would like to emphasize before we close this out

is that, your name attribute in your id attribute,

or your name attribute and for attribute don't actually need to be the same.

However, it's a good idea to keep them the same for the sake of clarity.

However, what is important is that your for

attribute and your id attribute are the same.

[MUSIC]

That covers the basics of forms.

Later on, if you start to learn about server side programming,

you'll learn how to process the data from your forms.

[SOUND]