1
00:00:00,000 --> 00:00:04,485
[MUSIC]

2
00:00:04,485 --> 00:00:07,111
>> Our form has some nice CSS applied and

3
00:00:07,111 --> 00:00:11,220
looks okay but it's still just a little
bit messy.

4
00:00:11,220 --> 00:00:15,570
Right now it's impossible for the user to
tell which form control does what.

5
00:00:15,570 --> 00:00:18,040
There's no way to know if the bio field is
for

6
00:00:18,040 --> 00:00:22,000
their email or if the email field is for
their password.

7
00:00:22,000 --> 00:00:27,130
We can label each one of our form controls
using the label element.

8
00:00:27,130 --> 00:00:30,620
Let's create some labels right now and
learn how they work.

9
00:00:30,620 --> 00:00:33,510
I'm going to create a label and then I'll
explain it.

10
00:00:34,590 --> 00:00:40,680
So if we hop into work space here our
first

11
00:00:40,680 --> 00:00:46,750
form field is for name, so lets add a
label for that, I'm going to type label.

12
00:00:48,370 --> 00:00:52,350
And as you can see, work spaces will
automatically close that element for me.

13
00:00:52,350 --> 00:00:57,950
And then I'm going to add an attribute
called for and

14
00:00:57,950 --> 00:01:02,870
we'll say it's equal to name and then

15
00:01:02,870 --> 00:01:07,990
inside of our label I'm going to type name
followed by a colon.

16
00:01:09,250 --> 00:01:16,100
So let's save that out, switch over to our
preview, and refresh.

17
00:01:16,100 --> 00:01:22,080
And as you can see we now have a name
label for this form field and, if I click

18
00:01:22,080 --> 00:01:28,470
on it, we'll automatically get focus on
this particular formed field.

19
00:01:29,650 --> 00:01:31,430
One thing I should note here is that

20
00:01:31,430 --> 00:01:35,750
I've added a colon, but that's not
actually required.

21
00:01:35,750 --> 00:01:38,480
You can format your label text however
you'd like.

22
00:01:39,920 --> 00:01:41,570
So, how does this work?

23
00:01:41,570 --> 00:01:46,750
Well, you'll notice that I've added a for
attribute to our label.

24
00:01:46,750 --> 00:01:52,580
This attribute associates the label with a
particular form element.

25
00:01:52,580 --> 00:01:55,710
The way it matches is by ID.

26
00:01:55,710 --> 00:02:01,650
So, if there's an element on the page with
the same value in its ID

27
00:02:01,650 --> 00:02:08,640
attribute, like we have right here, as the
value that's in the for attribute.

28
00:02:08,640 --> 00:02:11,860
As we have right here it will be matched.

29
00:02:11,860 --> 00:02:16,510
So, what it is mean for an element to be
matched to its label.

30
00:02:16,510 --> 00:02:19,670
Well, when I click on the label, like I
showed you previously we'll

31
00:02:19,670 --> 00:02:26,790
automatically get focus but what if we
didn't have that for attribute there.

32
00:02:26,790 --> 00:02:32,600
We'll just remove that, save and refresh
and now if I

33
00:02:32,600 --> 00:02:38,350
click on the name, it won't actually give
me focus to this element.

34
00:02:39,780 --> 00:02:42,370
However, if we do have the four attribute
there,

35
00:02:44,590 --> 00:02:45,820
we'll get that behaviour back.

36
00:02:47,050 --> 00:02:52,170
So let's add a few more labels for our
other form controls.

37
00:02:52,170 --> 00:02:59,120
I'm going to add a label for the email
field.

38
00:03:00,540 --> 00:03:05,406
So I'll type in email and then I'll add
one for password.

39
00:03:05,406 --> 00:03:12,720
Say, label for=password and again, I'm
making sure that I match.

40
00:03:12,720 --> 00:03:15,910
The IDs with the for attributes.

41
00:03:17,160 --> 00:03:21,740
So, we'll type in password there and then
finally

42
00:03:21,740 --> 00:03:25,350
let's type in a label for our bio field.

43
00:03:26,990 --> 00:03:32,350
So the ID is bi and we'll say, Biography.

44
00:03:32,350 --> 00:03:32,850
Let's

45
00:03:34,650 --> 00:03:37,220
make some space between each one of these,
just

46
00:03:37,220 --> 00:03:40,390
so we can see more clearly what's going
on.

47
00:03:40,390 --> 00:03:45,270
I'll save that, switch back to our
preview, and refresh the page.

48
00:03:45,270 --> 00:03:48,150
And let's just click around on each one of
these

49
00:03:48,150 --> 00:03:52,350
to make sure that it gives focus to the
proper element.

50
00:03:52,350 --> 00:03:59,130
Yep, it looks like everything's working
just like we expect and that looks good.

51
00:03:59,130 --> 00:04:01,430
Now the user can tell what kind of

52
00:04:01,430 --> 00:04:04,560
information they should put into each form
field.