1
00:00:00,420 --> 00:00:06,510
Okay so next up we're going to focus on labels and each HDMI forms so labels are exactly what they sound

2
00:00:06,510 --> 00:00:10,590
like they let us add captions to individual elements in our form.

3
00:00:10,590 --> 00:00:16,500
And the reason that we use them rather than just a paragraph or some plain text is that labels are really

4
00:00:16,500 --> 00:00:19,360
important for making our site accessible.

5
00:00:19,410 --> 00:00:24,500
So if someone is visually impaired or blind and they're accessing our forum trying to sign up their

6
00:00:24,500 --> 00:00:30,570
screen reader software that they're using is going to look for label tags and it's going to use those

7
00:00:30,570 --> 00:00:34,980
labels to know what each part of the form corresponds to.

8
00:00:34,980 --> 00:00:36,960
So it's really important.

9
00:00:36,960 --> 00:00:41,970
It's also a nice way just to add a little caption as you can see here explaining what each part of the

10
00:00:41,970 --> 00:00:43,530
form is used for.

11
00:00:43,530 --> 00:00:48,750
So there's two syntaxes we're going to cover the very first one looks like this.

12
00:00:48,750 --> 00:00:49,620
Create a label tag

13
00:00:52,740 --> 00:00:55,770
and then we actually put the input inside that label tag.

14
00:00:56,160 --> 00:00:59,820
So you might say something like your name

15
00:01:02,700 --> 00:01:10,120
and then we're just going to take this username and put and put it inside and rather than do this it's

16
00:01:10,140 --> 00:01:17,100
a little bit better make things spaced out a little bit so that we see the true relationship between

17
00:01:17,100 --> 00:01:17,640
things.

18
00:01:17,860 --> 00:01:25,220
So we'll put password colon and then the password and put.

19
00:01:27,630 --> 00:01:28,410
And there we go.

20
00:01:28,410 --> 00:01:32,050
That's all we should need to do refresh the page.

21
00:01:32,160 --> 00:01:36,720
We now have two labels that correspond to our two inputs.

22
00:01:38,190 --> 00:01:44,110
So there is an alternate syntax rather than having your inputs nested inside of a label.

23
00:01:44,130 --> 00:01:49,340
We actually can do them completely separate and we connect them in a slightly different way.

24
00:01:49,380 --> 00:01:55,920
You can see here we have a label and it has a four attribute set equal to user name.

25
00:01:56,190 --> 00:01:59,510
And then we have an input with an ID equal to username.

26
00:01:59,730 --> 00:02:07,290
So as long as these two match screenwriter's and other accessibility software will know that this label

27
00:02:07,470 --> 00:02:12,950
that is for user name is corresponding to this input with ID username.

28
00:02:12,960 --> 00:02:19,590
So just to show you that I'm going to go ahead and just duplicate this commented out just so we have

29
00:02:19,590 --> 00:02:20,640
it.

30
00:02:20,640 --> 00:02:25,080
And then what I'm going to do is move the input tags so that they're separate from the labels.

31
00:02:25,110 --> 00:02:29,730
They're no longer contained inside of that label tag.

32
00:02:29,730 --> 00:02:34,330
So they're no longer nested inside of one another.

33
00:02:37,110 --> 00:02:38,020
OK.

34
00:02:38,550 --> 00:02:46,470
And the next thing is connecting them because right now although it will look the exact same for software

35
00:02:46,830 --> 00:02:51,560
for people who are visually impaired these are not the exact same because they're not actually connected

36
00:02:51,570 --> 00:02:56,990
there is no line connecting this label to this input.

37
00:02:57,000 --> 00:03:02,380
So in order to do that we use the four attribute let's say for user name.

38
00:03:03,240 --> 00:03:13,870
And then over here we need to say ID is user name and we'll do the same thing label for password.

39
00:03:14,370 --> 00:03:17,830
And just to be clear the name does not matter.

40
00:03:17,850 --> 00:03:20,760
We do want to make sure that it's nice and meaningful.

41
00:03:20,760 --> 00:03:25,260
It's not just jibberish but it does not matter as long as it matches the ID

42
00:03:30,330 --> 00:03:32,790
and refresh it looks exactly the same.

43
00:03:32,790 --> 00:03:35,670
But you can just trust our data is now connected.

44
00:03:35,670 --> 00:03:37,200
We have a label for every input