Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Right now, it’s impossible for the user to tell what kind of information they should type into each form field. We can label form controls using the label element.
<label> element
- The
label-element helps to organize forms by assigning some helpful text to a form control. This text lets the user know what kind of data they should add to each form field.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
>> Our form has some nice CSS applied and
0:04
looks okay but it's still just a little
bit messy.
0:07
Right now it's impossible for the user to
tell which form control does what.
0:11
There's no way to know if the bio field is
for
0:15
their email or if the email field is for
their password.
0:18
We can label each one of our form controls
using the label element.
0:22
Let's create some labels right now and
learn how they work.
0:27
I'm going to create a label and then I'll
explain it.
0:30
So if we hop into work space here our
first
0:34
form field is for name, so lets add a
label for that, I'm going to type label.
0:40
And as you can see, work spaces will
automatically close that element for me.
0:48
And then I'm going to add an attribute
called for and
0:52
we'll say it's equal to name and then
0:57
inside of our label I'm going to type name
followed by a colon.
1:02
So let's save that out, switch over to our
preview, and refresh.
1:09
And as you can see we now have a name
label for this form field and, if I click
1:16
on it, we'll automatically get focus on
this particular formed field.
1:22
One thing I should note here is that
1:29
I've added a colon, but that's not
actually required.
1:31
You can format your label text however
you'd like.
1:35
So, how does this work?
1:39
Well, you'll notice that I've added a for
attribute to our label.
1:41
This attribute associates the label with a
particular form element.
1:46
The way it matches is by ID.
1:52
So, if there's an element on the page with
the same value in its ID
1:55
attribute, like we have right here, as the
value that's in the for attribute.
2:01
As we have right here it will be matched.
2:08
So, what it is mean for an element to be
matched to its label.
2:11
Well, when I click on the label, like I
showed you previously we'll
2:16
automatically get focus but what if we
didn't have that for attribute there.
2:19
We'll just remove that, save and refresh
and now if I
2:26
click on the name, it won't actually give
me focus to this element.
2:32
However, if we do have the four attribute
there,
2:39
we'll get that behaviour back.
2:44
So let's add a few more labels for our
other form controls.
2:47
I'm going to add a label for the email
field.
2:52
So I'll type in email and then I'll add
one for password.
3:00
Say, label for=password and again, I'm
making sure that I match.
3:05
The IDs with the for attributes.
3:12
So, we'll type in password there and then
finally
3:17
let's type in a label for our bio field.
3:21
So the ID is bi and we'll say, Biography.
3:26
Let's
3:32
make some space between each one of these,
just
3:34
so we can see more clearly what's going
on.
3:37
I'll save that, switch back to our
preview, and refresh the page.
3:40
And let's just click around on each one of
these
3:45
to make sure that it gives focus to the
proper element.
3:48
Yep, it looks like everything's working
just like we expect and that looks good.
3:52
Now the user can tell what kind of
3:59
information they should put into each form
field.
4:01
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up