WEBVTT

0
00:00.110 --> 00:05.960
Before we move on, I want to just mention this label tag in a little bit more detail because you might

1
00:05.960 --> 00:10.580
be thinking, what is the point of using this label tag?

2
00:11.210 --> 00:13.040
Well, let's get into it.

3
00:13.070 --> 00:14.930
What does the label element do?

4
00:14.960 --> 00:22.190
Well, firstly, it's used to add a caption for a form control, but it does not visually render anything

5
00:22.190 --> 00:23.780
special on the screen, does it?

6
00:23.810 --> 00:24.710
Let me show you.

7
00:24.860 --> 00:28.200
Firstly, let's look at the visual appearance of the label.

8
00:28.220 --> 00:32.800
First step is I want to set up a very simple HTML file and we don't even need a head.

9
00:32.810 --> 00:34.580
We're going to be very, very simple here. And here,

10
00:34.580 --> 00:35.660
let's have no label.

11
00:35.870 --> 00:37.490
Okay, That's the starting point.

12
00:37.610 --> 00:40.540
Let's have an input type of, I don't know, checkbox.

13
00:40.720 --> 00:41.630
It doesn't really matter.

14
00:41.630 --> 00:48.560
We don't need a name, we don't need an ID. And let's just say here, "Are you ready to enter this cool

15
00:48.560 --> 00:49.630
application?"

16
00:49.640 --> 00:51.830
That's all I want to do, let's save that.

17
00:52.950 --> 00:55.080
Go to the browser and there we go.

18
00:55.110 --> 00:56.050
Very, very simple.

19
00:56.070 --> 00:57.960
Let's just create a line break.

20
00:58.530 --> 01:01.320
Now let's add a label.

21
01:02.290 --> 01:03.040
And here we are.

22
01:03.070 --> 01:04.540
Let's just have a label,

23
01:05.540 --> 01:08.030
call-it, for welcome.

24
01:08.240 --> 01:11.510
And I don't know let's do input [with type] also checkbox.

25
01:11.840 --> 01:14.960
We don't need a name and the ID can be welcome.

26
01:15.140 --> 01:18.530
We actually didn't even have to do this, by the way, as you'll see shortly.

27
01:18.530 --> 01:25.370
And then our description can be: "Are you ready to enter this [cool] application?"

28
01:26.180 --> 01:30.350
And can you see on the browser, can you see anything different visually?

29
01:30.920 --> 01:32.790
No. And that's my point, right?

30
01:32.810 --> 01:39.490
It does nothing visually, but you'll notice when we have no label and I click the text, nothing happens.

31
01:39.500 --> 01:44.310
But if I click the text on the one with the label, it gets selected.

32
01:44.330 --> 01:45.230
How awesome.

33
01:45.770 --> 01:49.580
So we can see whether we have a label or not

34
01:49.610 --> 01:52.310
visually doesn't make a difference.

35
01:52.320 --> 01:56.280
It only comes down to the UI experience of a user.

36
01:56.300 --> 01:59.450
It just makes the user's life easier to select

37
01:59.450 --> 02:04.280
whichever input control you're using, or whichever form control you're using.

38
02:04.280 --> 02:06.410
And there's nothing special about the label element.

39
02:06.410 --> 02:10.400
It's just another HTML element - it's just markup.

40
02:10.490 --> 02:10.790
Okay

41
02:10.790 --> 02:14.900
Clyde, well then how do we use this label element?

42
02:14.900 --> 02:20.390
In order to use the label, we have to attach it to a form control.

43
02:20.390 --> 02:23.540
We have to link it up to a form control, right?

44
02:23.540 --> 02:25.830
And there are two main ways we can do this.

45
02:25.830 --> 02:29.910
The first way is that we can attach it implicitly.

46
02:29.940 --> 02:30.810
What 😕?

47
02:30.840 --> 02:31.580
What does that mean?

48
02:31.590 --> 02:31.950
All right.

49
02:31.950 --> 02:33.000
Well, let me show you.

50
02:33.600 --> 02:36.750
How does this implicit approach work?

51
02:36.750 --> 02:38.520
Well, it is very, very easy.

52
02:39.090 --> 02:41.550
All we need to do is define our label tag.

53
02:41.550 --> 02:43.830
We don't even need a for attribute.

54
02:43.860 --> 02:45.060
How cool is that?

55
02:45.240 --> 02:51.090
Now, what we do is we wrap our widget within the label tags itself.

56
02:51.090 --> 02:53.580
So here we can have input of type password,

57
02:53.580 --> 02:54.540
for example.

58
02:54.540 --> 02:59.280
We don't need a name, we don't even need an ID, let's just say password.

59
03:00.310 --> 03:01.840
Password, please.

60
03:03.260 --> 03:05.420
Save that, and here it is on our browser.

61
03:05.420 --> 03:10.280
But now if you click the actual text, if the user clicks on the text itself,

62
03:11.000 --> 03:14.660
the actual input gets highlighted and focused.

63
03:14.690 --> 03:15.470
Have you got it?

64
03:15.470 --> 03:16.820
So that's the implicit approach.

65
03:16.820 --> 03:20.870
We don't even need to use any attributes on the label in order for it to work.

66
03:20.870 --> 03:25.010
We just wrap our entire control within the label itself.

67
03:25.460 --> 03:26.000
Okay, great.

68
03:26.000 --> 03:32.510
So we've seen that we can apply it implicitly, aka we just wrap our input within the middle of the

69
03:32.510 --> 03:34.880
label, inside of the label tag.

70
03:34.910 --> 03:36.110
That's the first way.

71
03:36.110 --> 03:40.070
The most common way, however, is to do it explicitly.

72
03:40.160 --> 03:48.200
And when we use it explicitly, we have to use the "for" attribute on the label element.

73
03:48.200 --> 03:49.640
And what does the for attribute do?

74
03:49.670 --> 03:53.870
Well, it determines the input to which it is associated.

75
03:53.870 --> 04:01.820
And we've already seen a lot of examples that the for attribute value must match the ID, NOT the name,

76
04:01.820 --> 04:05.420
that's important, the ID of the input element.

77
04:05.540 --> 04:05.960
Right.

78
04:05.960 --> 04:08.950
And we've seen examples of this during the course.

79
04:08.960 --> 04:15.450
Just note that when we submit a form, we have to pay special attention to the name attributes of each

80
04:15.450 --> 04:16.530
control.

81
04:16.890 --> 04:24.180
But when we deal with label pairing, we rely on the ID, and this is often why you'll see in code input

82
04:24.180 --> 04:29.460
elements having the same value in both attributes - in the ID attribute and the name attribute.

83
04:29.460 --> 04:35.130
Because the name attribute deals with form submission, the ID often links it up to a label control ...

84
04:35.130 --> 04:37.950
and CSS by the way. Is that making sense?

85
04:37.950 --> 04:40.860
So we can use the implicit or the explicit approach.

86
04:40.860 --> 04:46.440
We've seen an example of the implicit, but let's just quickly go back to the text editor and I want

87
04:46.440 --> 04:49.350
to show you an example of us using an explicit approach.

88
04:49.350 --> 04:52.500
We've already done this tons of times, so it's going to be very, very quick.

89
04:52.620 --> 04:54.180
We've seen the implicit approach.

90
04:54.180 --> 04:55.770
How does the explicit approach work?

91
04:55.770 --> 04:59.100
Well, that's pretty much what we've done in all the examples thus far, right?

92
04:59.100 --> 05:03.360
So what we do is we don't wrap the input within the label.

93
05:03.360 --> 05:07.260
What we do, is that input comes outside of the label.

94
05:07.350 --> 05:09.510
But if we do that, what's going to happen?

95
05:09.510 --> 05:10.350
Well, that's right.

96
05:10.350 --> 05:11.520
There's no association.

97
05:11.520 --> 05:15.030
So if the user clicks on the actual text itself, nothing happens.

98
05:15.030 --> 05:17.700
The actual input box itself doesn't get selected.

99
05:17.700 --> 05:19.740
So you need a way to kind of link the two.

100
05:19.740 --> 05:22.290
And the way you do this is very, very easy.

101
05:22.320 --> 05:27.240
We actually normally put the label text within the label tags.

102
05:27.980 --> 05:28.700
Just like this.

103
05:28.730 --> 05:29.750
That's what we normally do.

104
05:29.780 --> 05:31.520
It doesn't visually do anything different.

105
05:31.520 --> 05:33.830
You can just see here on the screen, nothing has changed.

106
05:34.400 --> 05:40.010
Again, if you click on password, nothing happens because we haven't associated the input type with

107
05:40.010 --> 05:40.670
the label.

108
05:40.670 --> 05:43.520
And in order to do so, it is so, so easy.

109
05:44.000 --> 05:49.460
All we do is we give this a "for" attribute and let's call it password, right?

110
05:49.520 --> 05:51.260
Because we're dealing with a password.

111
05:51.470 --> 05:53.240
Again, this does nothing on its own.

112
05:53.240 --> 05:56.660
What we have to do is tell it that it relates to which widget.

113
05:56.660 --> 06:04.940
And we do that by having an ID on the input that matches the value of that "for" attribute, which we

114
06:04.970 --> 06:06.560
defined as password.

115
06:06.710 --> 06:11.720
And if we do this, if the user clicks the word password, yeah, boom 💥, there we go.

116
06:11.750 --> 06:14.450
The input widget now gets focus.

117
06:15.290 --> 06:17.480
I told you that would be very, very quick.

118
06:17.570 --> 06:19.430
Okay, so that's the label element.

119
06:19.730 --> 06:21.680
What benefits does it give us?

120
06:21.710 --> 06:26.750
Well, the most obvious one is that it improves user experience.

121
06:26.750 --> 06:32.700
If the user clicks on the text within the label element, it toggles the form control itself.

122
06:32.790 --> 06:38.340
And remember, in order for this to work, the "for" attribute of the label tag should equal the ID attribute

123
06:38.340 --> 06:42.480
of the related form element in order to bind them together.

124
06:42.840 --> 06:43.040
Right.

125
06:43.050 --> 06:44.760
That's the most obvious benefit.

126
06:44.760 --> 06:46.590
But there are others.

127
06:46.710 --> 06:52.140
The second main benefit to using labels is that it's good for semantic reasons.

128
06:52.170 --> 06:55.680
In other words, so you and others can understand your code.

129
06:55.710 --> 07:01.350
If you have some text that represents a label for an input, you can wrap it in label tags, not for

130
07:01.350 --> 07:03.810
presentation, but because it's what it is.

131
07:03.840 --> 07:08.670
In other words, without having a label tag that text or control is almost meaningless.

132
07:08.670 --> 07:14.790
So with the label tag included and its "for" attribute, you are basically providing meaning and structure

133
07:14.790 --> 07:21.060
and you're forming a relationship between your markup that can better be understood by computers, parsers

134
07:21.060 --> 07:23.010
browsers and of course people.

135
07:23.130 --> 07:26.490
That's the second reason why it's good to have the label element.

136
07:26.670 --> 07:31.830
The third reason is that it helps visually challenged users.

137
07:31.860 --> 07:38.550
As you know, visually challenged users often use screen readers that read the associated label tag

138
07:38.550 --> 07:46.310
whenever a form control is used or focused. By simply including a bunch of text next to form elements,

139
07:46.320 --> 07:52.920
the screen reader will read the form as simply a bunch of items like input box name, input box email,

140
07:52.920 --> 07:54.480
input box location ...

141
07:54.480 --> 08:00.840
but when you use a label tag, the screen reader knows which text is associated with which form element

142
08:00.840 --> 08:04.860
and it will read each label with its proper form element accordingly.

143
08:05.010 --> 08:07.390
It just makes the experience better.

144
08:07.410 --> 08:08.720
That's what I'm trying to say.

145
08:08.730 --> 08:12.930
And that concludes this awesome, awesome lecture.

146
08:12.930 --> 08:13.770
Well done.

147
08:15.030 --> 08:17.580
Pop open that wine bottle 🍷, champagne bottle, 

148
08:17.580 --> 08:22.290
or in my case, another cup of coffee ... and I'll see you in the next lecture.