Preview
Video Player
00:00
00:00
The Label Element
4:05Right 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.
[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